令 学 网 课 、 练 题库 、 测 水 平 ， 微 信 、 手 机 、 网 站 多 维 模式 信 手 拓 来 
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令 提供 微 信 公众 号 、QQ 群 、 教 学 网 站 等 多 渠道 互动 服务 读者 
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第 国 章 MysQL 数据 库 开发 魔 典 


内 容 简 介 

本 书 采用 “基础 知识 一 核心 技术 一 高 级 应 用 一 项 目 实践 ”结构 和 “从 入 门 到 项 目 实践 ”的 学 习 模式 进行 讲解 。 全 
书 共 4 篇 21 章 。 首 先 ， 讲 解 了 HIML 5 和 CSS 3 的 基本 知识 ， 包 括 HTML 5 快速 上 手 、 使 用 HIML 5 设计 移动 页 面 
结构 、 使 用 HTML 5 设计 移动 页 面 表单 、 使 用 HTML 5 绘制 移动 页 面 元 素 、CSS 3 样式 入 门 与 基础 语法 、 使 用 CSS 3 设 
计 移 动 页 面 样式 、 设 计 Web App 页 面 布局 ， 其 次 ， 讲 解 了 JavaScript、jQuery 框架 、AngularJs 框架 、jQuery Mobile 
等 核心 技术 。 在 实践 篇 中 ， 介 绍 了 HITML 5 在 不 同行 业 的 应 用 ， 通 过 项 目 实战 案例 ， 全 面 展 示 了 项 目 开发 的 实践 全 过 程 。 

本 书 旨 在 从 多 角度 、 全 方位 帮助 读者 快速 掌握 软件 开发 技能 ， 构 建 从 高 校 到 社会 与 企业 的 就 职 桥 梁 ， 让 有 志 于 从 
事 软件 开发 行业 的 读者 轻松 步 入 职场 。 同 时 本 书 还 赠送 王牌 资源 ， 由 于 赠送 的 资源 比较 多 ， 我 们 在 本 书 前 言 部 分 对 资 
源 包 的 具体 内 容 、 获 取 方 式 以 及 使 用 方法 等 做 了 详细 说 明 。 

本 书 适合 HTML 5 开发 技术 的 爱好 者 或 者 初学 者 阅读 ， 也 可 作为 没有 项 目 实践 经 验 , 但 有 一 定 Web 前 端 开发 经 
验 的 人 员 阅 读 ， 还 可 作为 正在 进行 软件 专业 毕业 设计 的 学 生 以 及 大 专 院 校 和 培训 学 校 的 参考 用 书 。 
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PREFACE 吾 


丛书 说 明 


本 套 “ 软 件 开发 魔 典 ” 系 列 图 书 ， 是 专门 为 编程 初学 者 量 身 打 造 的 编程 基础 学 习 与 项 目 实践 用 书 。 

本 套 从 书 针对 “ 零 基础 ” 和 “入 门 ”级 读者 ， 通 过 案例 引导 其 深入 技能 学 习 和 项 目 实践 。 为 满足 初 
学 者 在 基础 入 门 、 扩 展 学 习 、 编 程 技能 、 项 目 实践 等 几 个 方面 的 职业 技能 需求 ， 特 意 采 用 “基础 知识 一 核 
心 技 术 一 高 级 应 用 一 项 目 实践 ”的 结构 和 “由 浅 入 深 ， 由 深 到 精 ” 的 学 习 模 式 进行 讲解 。 

本 从 书目 前 计划 有 以 下 分 册 : 

《Java 从 入 门 到 项 目 实践 ( 超 值 版 )》 





























《HTML 5 从 入 门 到 项 目 实践 〈 超 值 版 ) 》 
《C 语言 从 入 门 到 项 目 实践 〈 超 值 版 )》 《MySQL 从 入 门 到 项 目 实践 〈 超 值 版 )》 


《JavaScript 从 入 门 到 项 目 实践 〈 超 值 版 )》 《Oracle 从 入 门 到 项 目 实践 〈 超 值 版 )》 





《C++ 从 入 门 到 项 目 实践 〈 超 值 版 )》 《HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 )》 


读 万 卷 书 ， 不 如 行 万 里 路 ， 行 万 里 路 ， 不 如 阅 人 无 数 ， 阅 人 无 数 ， 不 如 有 高 人 指 路 。 这 人 句 话 道 出 了 引 
导 与 实践 对 于 学 习 知识 的 重要 性 。 本 书 始 于 基础 ， 结 合理 论 知识 的 讲解 ， 从 项 目 开发 基础 入 手 ， 逐 步 引导 
读者 进行 项 目 开发 实践 ,深入浅出 地 讲解 HTML 5 在 移动 开发 中 的 各 项 技术 和 项 目 实践 技能 。 本 丛书 的 目 
的 是 多 角度 、 全 方位 地 帮助 读者 快速 掌握 软件 开发 技能 ， 为 读者 构建 从 高 校 到 社会 与 企业 的 就 职 桥梁 ， 让 
有 志 从 事 软件 开发 的 读者 轻松 步 入 职场 。 


HTML 5 最 佳 学 习 线 路 
本 书 以 HTML 5 最 佳 的 学 习 模式 分 配 内 容 结 构 , 第 1~3 篇 可 使 您 掌握 HTML 5 移动 开发 基础 知识 、 应 


技能 ， 第 4 篇 可 使 您 拥有 多 个 行业 项 目 开发 经 验 。 遇 到 问题 可 学 习 本 书 同步 微 视频 ， 也 可 以 通过 在 线 技 
术 支 持 ， 让 老 程序 员 为 您 答疑 解 惑 。 


本 书 内 容 


全 书 分 为 4 篇 21 章 。 
第 1 篇 (第 1 章 ~ 第 7 章 ) 为 基础 知识 ， 主 要 讲解 HIML 5 基础 知识 、 设 计 移动 页 面 结构 、 设 计 移动 
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页 面 表单 、 绘 制 移动 页 面 元 素 、CSS 3 入 门 与 基本 语法 、CSS 3 设计 移动 页 面 样式 等 。 通 过 本 篇 的 学 习 ， 读 
者 能 够 快速 掌握 HTML 5 语言 ， 为 后 面 更 好 地 学 习 使 用 HTML 5 进行 移动 开发 打下 坚实 基础 。 

第 2 篇 (第 8 章 ~ 第 11 章 ) 为 核心 技术 ,主要 讲解 Web App 页 面 、 原 生 JavaScript 交互 功能 开发 、jQueiy 
经 典 交互 特效 开发 、AngularJS 框架 等 。 通 过 本 篇 的 学 习 ， 读 者 将 对 使 用 HTML 5 进行 移动 开发 有 更 高 的 党 
握 水 平 。 

第 3 篇 (第 12 章 ~ 第 17 章 ) 为 高 级 应 用 ， 主 要 讲解 认识 jQuery Mobile、jQuery Mobile 页 面 、jQuery Mobile 
页 面 组 件 、 使 用 jQuery Mobile 主题 、 使 用 jQuery Mobile 事件 、 使 用 jQuery Mobile 插件 等 。 学 完 本 篇 ， 
读者 将 对 jQuery Mobile 在 移动 开发 中 对 页 面 控制 、 动 画 、 特 效 以 及 事件 等 方面 有 全 面 的 掌握 。 

第 4 篇 (第 18 章 ~ 第 21 章 ) 为 项 目 实践 ， 主 要 介绍 HTML 5 在 游戏 开发 行业 中 的 应 用 、 在 教育 开发 
行业 中 的 应 用 、 手 机 端 案例 一 一 记事 本 App、 人 脸 识 别 案例 一 一 年 龄 小 侦探 App 等 手机 App 实战 开发 案例 。 
学 习 完 本 篇 ， 读 者 将 对 HTML 5 在 移动 开发 中 的 作用 有 详细 了 解 ， 能 在 自己 的 职业 生涯 中 面 对 各 类 HIML 5 开 
发 需求 做 到 游 思 有 余 、 运 用 自如 。 

全 书 不 仅 融入 了 作者 丰富 的 工作 经 验 和 多 年 的 使 用 心得 ， 还 提供 了 大 量 来 自 工作 现场 的 实例 ， 具 有 较 
强 的 实战 性 和 可 操作 性 。 系 统 学 习 完 本 书后 ， 可 以 让 读者 掌握 HTML 5 语言 基础 知识 、 全 面 的 前 端 程序 开 
发 能 力 、 优 良 的 团队 协同 技能 和 丰富 的 项 目 实战 经 验 。 我 们 的 目标 就 是 让 初学 者 、 应 届 毕 业 生 快速 成 长 为 
一 名 合格 的 初级 程序 员 ， 通 过 演练 积累 项 目 开 发 经 验 和 团队 合作 技能 ， 在 未 来 的 职场 中 获取 一 个 高 的 起 点 ， 
并 能 迅速 融入 软件 开发 团队 。 


本 书 特色 


1. 结构 科学 ， 易 于 自学 

本 书 在 内 容 组 织 和 范例 设计 中 充分 考虑 初学 者 的 特点 ， 由 浅 入 深 、 循 序 渐进， 对 于 读者 而 言 ， 无 论 是 
否 接 触 过 HTML 5 语言 ， 都 能 从 本 书 中 找到 最 佳 起 点 。 

2. 视频 讲解 ， 细 致 透彻 

为 降低 学 习 难 度 ， 提 高 学 习 效率 ， 本 书 录制 了 同步 微 视频 〈 模 拟 培训 班 模式 ) ， 通 过 视频 除了 能 轻松 
学 会 专业 知识 外 ， 还 能 获取 老师 的 软件 开发 经 验 ， 使 学 习 变 得 更 轻松 有 效 。 

3. 超 多 、 实 用 、 专 业 的 范例 和 实践 项 目 

本 书 结合 实际 工作 中 的 应 用 范例 ， 逐 一 讲解 HTML 5 语言 的 各 种 知识 和 技术 ， 在 项 目 实践 篇 中 以 4 个 项 
目的 实践 总 结 本 书 前 17 章 介 绍 的 知识 和 技能 ， 使 读者 在 实践 中 掌握 知识 ， 轻 松 拥有 项 目 开 发 经 验 。 

4. 随时 检测 自己 的 学 习 成 果 
每 章 首页 均 提供 了 “学 习 指 引 ” 和 “重点 导读 ”， 以 指导 读者 重点 学 习 及 学 后 检查 ， 章 后 的 “就 业 面 
试 技巧 与 解析 ”根据 当前 最 新 求职 面试 (笔试 ) 题 精 选 而 成 ， 读 者 可 以 随时 检测 自己 的 学 习 成 果 ， 做 到 融 
会 贯通 。 

5. 专业 创作 团队 和 技术 支持 

本 书 由 聚 募 课 研发 中 心 编著 和 提供 在 线 服务 。 您 在 学 习 过 程 中 遇 到 任何 问题 ， 均 可 登录 
http://www.jumooc.com 网 站 或 加 入 图 书 读者 (技术 支持 ) QQ 群 529669132 进行 提问 ， 作 者 和 资深 程序 员 将 
为 您 在 线 答疑 。 
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本 书 附 赠 超 值 王牌 资源 库 


本 书 附 赠 了 极为 丰富 、 超 值 的 王牌 资源 库 ， 具 体内 容 如 下 。 

(1) 王牌 资源 1: 随 赠 本 书 “ 配 套 学 习 与 教学 ”资源 库 ， 提 升 读者 学 会 用 好 HTML 5 语言 的 学 习 效率 。 

。 全 书 同步 333 节 教 学 微 视频 录像 (支持 扫描 二 维 码 观 看 )， 总 时 长 25 学 时 。 

。 全 书 有 4 个 大 型 项 目 案例 及 324 个 实例 源 代码 。 

。 本 书 配套 上 机 实 训 指 导 手 册 ， 全 书 学 习 、 授 课 与 教学 PPT 课件 。 

(2) 王牌 资源 2， 随 赠 “ 职 业 成 长 ”资源 库 ， 突 破 读者 职业 规划 与 发 展 弊端 和 瓶颈 。 

。 求职 资源 库 :100 套 求职 简历 模板 库 ，600 套 毕 业 答辩 与 80 套 学 术 开 题 报告 PPT 模板 库 。 

。 面试 资源 库 : 程序 员 面试 技巧 ， 常 见面 试 (笔试 ) 题库 ，400 道 求职 常见 面试 (笔试 ) 真题 与 解析 。 

。 职业 资源 库 ， 程序 员 职 业 规划 手册 、 软 件 工程 师 技 能 手册 、100 例 常见 错误 及 解决 方案 、 开 发 经 验 
及 技巧 集 、100 套 岗 位 竞聘 模板 。 

(3) 王牌 资源 3， 随 赠 “HTML 5 移动 开发 魔 典 ”资源 库 ， 拓 展 读者 学 习 本 书 的 深度 和 广度 。 

。 案例 资源 库 ，600 个 案例 及 源码 注释 。 

。 项 目 资源 库 : 十 大 行业 网 站 开发 策划 案 。 

。 软件 开发 文档 模板 库 : 60 套 八 大 行业 软件 开发 文档 模板 库 ，90 套 HTML 5 特效 案例 库 、133 套 网 
页 与 移动 开发 模板 库 、3600 例 网 页 素材 库 、4 套 网 页 配色 电子 书库 、14 套 网 页 赏析 案例 库 。 

。 软件 学 习 必 备 工具 及 电子 书 资源 库 ' HTML 参考 手册 电子 书 、CSS 参考 手册 电子 书 、JavaScript 参 
考 手 册 电 子 书 、CSS 属性 速 查 表 电 子 书 、HTML 标签 速 查 表 电 子 书 、jQuery 速 查 表 电 子 书 、HTML 
语法 速 查 表 电 子 书 、 网 页 配色 电子 书 、Web 布局 模板 电子 书 。 

(4) 王牌 资源 4: 编程 代码 优化 纠 错 器 。 

。 本 助手 能 让 软件 开发 更 加 便捷 和 轻松 ， 无 须 安装 配置 复杂 的 软件 运行 环境 即 可 轻松 运行 程序 代码 。 

。 本 助手 能 一 键 格 式 化 ， 让 凌乱 的 程序 代码 更 加 规整 美观 。 

。 本 助手 能 对 代码 精准 纠 错 ， 让 程序 查 错 不 再 难 。 


上 述 资源 获取 及 使 用 
注意 :由 于 本 书 不 配 光 盘 ， 因 此 书 中 所 用 资源 及 上 述 资源 均 需 从 网 络 下 载 才能 使 用 。 
1. 资源 获取 
采用 以 下 任意 途径 ， 均 可 获取 本 书 所 附 赠 的 超 值 王牌 资源 库 : 
(1) 加 入 本 书 微 信 公众 号 ， 下 载 资源 或 者 咨询 关于 本 书 的 任何 问题 。 
(2) 登录 网 站 www.jumooc.com， 搜 索 本 书 并 下 载 相应 资源 。 


(3) 加 入 本 书 读者 服务 (技术 支持 ) QQ 群 (529669132) ， 读 者 可 以 打开 群 “文件 ”中 对 应 的 Word 
文件 ， 获 取 本 书 网 络 下 载 地 址 和 密码 。 


































































































读者 服务 QQ 群 


A 入 〈 超 值 版 7 
HTML 5 到 项 目 实践 〈 超 
2 门 








(4) 通过 电子 邮件 elesite@163.com 或 408710011@qq.com 与 我 们 联系 ， 获 取 本 书 资 源 。 

2. 使 用 资源 

读者 可 通过 以 下 途径 学 习 和 使 用 本 书 微 视频 和 资源 。 

(1) 通过 PC 端 (在 线 ) 、App 端 (在 /离线 ) 、 微 信 端 (在 线 ) 以 及 平板 端 (在 /离线 ) 学 习 本 书 微 视频 。 





视频 讲解 
细致 透彻 
扫 码 

















(2) 将 本 书 资源 下 载 到 本 地 硬盘 ， 根 据 学 习 需 要 选择 使 用 。 
本 书 适合 哪些 读者 阅读 


本 书 适合 以 下 人 员 阅 读 ;: 











。 没有 任何 HTML 5 语言 基础 的 初学 者 。 
。 有 一 定 的 HTML 5 语言 基础 ， 想 精通 HTML 5 语言 编程 的 人 员 。 
。 有 一 定 的 HTML 5 编程 基础 ， 没 有 项 目 实践 经 验 的 人 员 。 
。 正在 进行 软件 专业 相关 毕业 设计 的 学 生 。 
。 大 专 院 校 及 培训 学 校 的 老师 和 学 生 。 
创作 团队 























本 书 由 聚 慕 课 教育 研发 中 心 组 织 编写 , 朱红 庆 老师 任 主编 , 负责 编写 第 1 章 ~~ 第 11 章 , 薄 鹏 任 副 主编 ， 
负责 编写 第 12 章 一 第 19 章 。 参 与 本 书 编写 的 人 员 有 薄 鹏 、 王 湖 芳 、 张 开 保 、 贾 文学 、 张 村、 白 晓 阳 、 李 
焦 
至 












































新 伟 、 李 坚 明 、 白 彦 飞 、 卞 良 、 常 鲁 、 陈 诗 谦 、 崔 怀 奇 、 邓 伟 奇 、 凡 旭 、 高 增 、 郭 永 、 何 旭 、 姜 晓 东 、 焦 
宏 恩 、 李 春 亮 、 李 团 辉 、 刘 二 有 、 王 朝阳 、 王 春玉 、 王 发 运 、 王 桂 军 、 王 平 、 王 千 、 王 小 中 、 王 玉 超 、 
振 、 徐 利 军 、 姚 玉 忠 、 于 建 杉 、 张 俊 锋 、 张 晓 杰 、 张 在 有 等 。 

在 本 书 的 编写 过 程 中 ， 我 们 竭尽 所 能 地 将 最 好 的 讲解 呈现 给 读者 ， 但 也 难免 有 下 漏 和 不 妥 之 处 ， 敬 请 
广大 读者 不 音 指 正 。 若 您 在 学 习 中 遇 到 困难 或 疑问 ， 或 有 何 建议 ， 可 发 邮件 至 elesite@163.com。 另 外 ， 您 
也 可 以 登录 我 们 的 网 站 http://wwwjumooc.com， 进 行 交流 以 及 免费 下 载 学 习 资 源 。 
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第 1 篇 


基础 知识 


本 篇 从 HTML 5 基本 知识 入 门 开 始 ， 介 绍 了 HTML 5 在 移动 开发 中 的 基础 与 核心 技术 、CSS 3 的 知识 
以 及 HTML 5+CSS 3 移动 页 面 的 设计 等 ， 引 领 读者 进入 HTML 5 移动 开发 的 新 世界 。 


第 1 章 
第 2 章 
第 3 章 
第 4 章 
第 5 章 
第 6 章 
第 7 章 


步 入 HIML 5 移动 开发 新 世界 
HTML 5 快速 上 手 

使 用 HTML 5 设计 移动 页 面 结 构 
使 用 HTML 5 设计 移动 页 面 表单 
使 用 HTML 5 绘制 移动 页 面 元 素 
CSS 3 样式 入 门 与 基础 语法 
使 用 CSS 3 设计 移动 页 面 样式 





第 1 章 
步 入 HTML 5 移动 开发 新 世界 


六 学 习 指 引 


HTML 5 是 HTML 的 最 新 版 本 ， 尽 管 在 IE 桌面 浏览 器 中 ，HTML 5 的 应 用 还 显得 十 分 缓慢 ， 但 在 移动 
设备 上 ，HTML 5 已 经 逐渐 成 为 潮流 趋势 ， 而 且 几 乎 主流 智能 手机 及 平板 计算 机 都 支持 HTML 5。 本 章 介 
绍 HIML 5 的 基础 知识 ， 包 括 HTML 5 的 由 来 、HTML 5 的 特殊 之 处 ， 以 及 一 些 HTML 5 移动 开发 辅助 工 
具 等 。 


全” 重点 导读 


。 了 解 HTML 5 的 概述 。 

。 熟 悉 HTML 5 的 特殊 之 处 。 

“熟悉 HIML 5 在 iOS 和 Android 设备 中 的 使 用 。 
。 了 解 HTML 5 移动 开发 辅助 工具 。 

“掌握 HTML 5 移动 开发 编辑 器 。 

。 热 悉 配 置 移 动 开发 环境 。 

。 试 着 开发 第 一 个 属于 自己 的 移动 网 站 。 

。 了 解 测试 工具 。 


1.1 _ HTML 5 概述 











HTML 5 是 HTML 最 新 的 修订 版 本 ，2014 年 10 月 由 万 维 网 联盟 (W3C) 完成 标准 制定 。HTML 5 的 设 
计 目 的 是 为 了 在 移动 设备 上 支持 多 媒体 ， 具 有 简单 易学 的 特点 。 














全 1.1.1 HTML 5 的 由 来 


HIML 5 是 W3C 与 WHATWG 合作 的 结果 ,WHATWG 指 Web Hypertext Application Technology Working 


第 国 章 步 入 HTML 5 移动 开发 新 世界 

















Group。WHATWG 致力 于 Web 表单 和 应 用 程序 ， 而 W3C 专注 于 XHTML 2.0。 在 2006 年 ， 双 方 决定 进行 











合作 ， 来 创建 一 个 新 版 本 的 HTML。 
HTML 5 是 新 一 代 HTML 标准 , 目前 仍 处 于 完善 之 中 , 但 








HTML 5 特性 。Internet Explorer 9 将 支持 某 些 HTML 5 特性 ， 如 
图 11 所 示 。 全 价 











。 用 于 绘画 的 canvas 元 素 。 
































对 本 地 离线 存储 的 更 好 支持 。 
添加 一 些 新 的 特殊 内 容 元 素 ， 如 article、footer、header、nav、section。 
添加 一 些 新 的 表单 控件 ， 如 calendar、date、time、email、url、search。 


1.1.2 XML 及 XHTML 





现在 ， 大 部 分 浏览 器 已 经 具备 了 支持 部 分 HTML 5 的 功能 。 便 ) 
如 ， 最 新 版 本 的 Safari、Chrome、Firefox 以 及 Opera 支持 某 些 p> WD 
HTML 5 中 具有 一 此 有趣 的 新 特性 ， 具 体 介绍 如 下 ; © Q Ee 


于 媒介 回放 的 video 和 audio 元 素 。 1-1 支持 HTML 5 的 浏览 器 版 本 


回 
XML (EXtensible Markup Language)， 即 可 扩展 标记 语言 ， 是 一 种 必须 正确 标记 上 且 格 式 良 好 的 标记 语 
言 。XML 应 用 于 Web 开发 的 许多 方面 ， 常 用 于 简化 数据 的 存储 和 共享 。 XML 标签 没有 被 预定 义 ， 需 要 用 

















户 自 行 定义 。 
另外 ，XML 可 以 用 于 创建 新 的 互联 网 语言 ， 很 多 新 的 互联 网 语言 是 通过 XML 创建 的 。 例 











如 XHTML 


语言 ， 用 于 描述 可 用 的 Web 服务 的 WSDL， 作 为 手持 设备 的 标记 语言 的 WAP 和 WML， 用 于 新 闻 feed 的 








RSS 语言 ， 描 述 资本 和 本 体 的 RDF 和 OWL， 用 于 描述 针对 Web 多 媒体 的 SMIL 等 。 





XHTML 是 以 XML 格式 编写 的 HTML， 是 指 可 扩展 超 文本 编辑 语言 ， 与 HTML 4.01 版 本 几乎 相同 ， 


可 以 说 XHTML 是 更 严格 、 更 纯净 的 HTML 版 本 。XHTML 是 以 XML 应 用 的 方式 定义 的 HTM 
年 1 月 ，W3C 推荐 发 布 为 标准 ， 目 前 ， 几 乎 得 到 所 有 主流 浏览 器 的 支持 。 





L， 在 2001 


XHTML 具有 <!IDOCTYPE..….> 强 制 性 、 元 素 必须 合理 嵌 套 、 元 素 必须 有 关闭 标签 、 空 元 素 必须 包含 关 


闭 标 签 、 元 素 必须 是 小 写 、 属 性 名 称 必须 是 小 写 、 属 性 值 必须 有 引号 和 不 允许 属性 简写 等 特性 。 


1.1.3 ”HTML 5 能 做 什么 


首先 , HTML 新 版 本 HTML 5 的 主要 特点 还 是 在 音频 和 视频 方面 。 用 户 可 以 运用 <video> 和 <audio> 的 


标签 ， 直 接 进 行 视频 和 音频 的 制作 ， 并 通过 JavaScript 接口 来 控制 。 


其 次 , 是 在 兼容 性 方面 的 问题 ， 浏 览 器 的 不 同 HTML 5 中 的 JavaScript 库 就 会 根据 相关 浏览 





览 器 做 出 调 


整 ， 提 供 Flash、QuickTime、Java 三 种 播放 器 作为 补丁 ， 这 也 方便 了 在 使 用 过 程 中 对 播放 器 要 求 的 限制 。 
再 次 ，HTML 5 在 使 用 过 程 中 ， 只 要 经 用 户 许 可 ， 就 可 以 知道 用 户 当前 的 地 理 坐 标 ， 这 样 一 来 ， 提 供 





的 服务 也 就 更 加 的 本 地 化 , 与 使 用 Android 的 系统 一 样 , 硬件 会 尝试 用 多 种 方式 进行 定位 , 比如 在 
GPS 等 。 





电信 、WIEI、 


最 后 ，HTML 5 通过 两 种 方式 来 支持 本 地 储存 功能 : 一 是 key-value 方式 的 local Storage， 在 正 8 版 本 
之 前 , 即 没有 Local Storage 的 环境 情况 下 , local-storage-js 就 是 用 cookie 替代 ; 二 是 数据 库 方式 的 Web SQL 


Database，JavaScript 库 Persist JS 则 可 通过 Gears、Local Storage、Web SQL Database、Global Stor 
正 、cookie 等 多 个 存储 方法 逐一 尝试 ， 这 样 兼容 性 就 能 够 最 大 限度 地 实现 。 


age、Flash、 


003 








HTML 5 从 入 门 到 项 目 实践 ( 超 信 版 ) 


NA 


昌 1.1.4 HTML 5 的 标签 特性 


HTML 5 的 核心 要 素 就 是 标签 了 (tag), 标签 是 用 来 描述 文档 中 的 各 种 内 容 基 本 单元 , 不 同 标签 标示 着 
不 同 的 含义 ， 标 签 之 间 的 嵌 套 表示 了 内 容 之 间 的 结构 ，HTML 5 的 标签 通常 具有 以 下 特征 。 
。 HTML 5 标签 是 由 尖 括 号 包围 的 关键 词 ， 比 如 <html>。 
HTML 5 标签 通常 是 成 对 出 现 的 ， 比 如 <b> 和 </b>。 
标签 对 中 的 第 一 个 标签 是 开始 标签 ， 第 二 个 标签 是 结束 标签 。 
开始 标签 和 结束 标签 也 被 称 为 开放 标签 和 闭合 标签 。 














1.2 熟悉 HTML 5 的 特殊 之 处 


随 着 移动 互联 网 的 发 展 ，HTML 5 将 成 为 新 的 热门 技术 ， 主 要 原因 在 于 HTML 5 具有 以 下 特殊 特性 。 

。 HTML 5 是 在 已 有 技术 基础 之 上 的 新 版 本 ， 上 手 较 C、C++ 语 言 容易 得 多 ， 且 性 能 最 接近 桌面 应 用 。 

。 HTML 5 只 要 有 个 记事 本 和 支持 它 的 浏览 器 就 可 以 开发 、 调 试 和 运行 ， 简 化 了 对 特定 环境 的 依赖 ， 
和 诸如 编译 之 类 的 等 待 过 程 。 

。 HTML 5 不 仅 可 以 在 支持 它 的 浏览 器 , 包括 PC 和 移动 设备 上 运行 , 还 可 以 在 桌面 上 像 桌面 应 用 一 
样 运行 ， 甚 至 可 以 让 用 户 认为 它 就 是 桌面 应 用 。 






































1.3 在 iOS 和 Android 设备 中 使 用 HTML 5 


在 iOS 和 Android 设备 中 使 用 HTML 5 是 主流 趋势 ， 因 为 它们 都 能 很 好 地 支持 HTML 5， 这 要 归功 于 
WebKit。 目 前 , 在 iOS 和 Android 设备 中 运行 的 浏览 器 ,如 iOS 下 的 Safari 以 及 Android 下 的 Chrome 都 是 
基于 WebKit， 而 WebKit 对 HTML 5 有 相当 出 色 的 支持 。 

使 用 HTML 5 为 iOS 和 Android 设计 Web 页 面 以 及 应 用 最 大 好 处 是 ， 它 们 在 未 来 的 设备 上 仍 能 继续 运 
行 。 目 前 ， 在 平板 计算 机 、 智 能 手机 以 及 智能 电视 上 使 用 的 操作 系统 将 来 还 会 发 展 到 更 多 设备 上 ， 如 汽车 、 
图 像 播放 设备 ， 甚 至 冰箱 、 洗 衣 机 等 家 电 设备 上 。 














1.4 HTML 5 移动 开发 辅助 工具 


使 用 HTML 5 在 开发 移动 网 站 的 过 程 中 ， 需 要 借助 一 些 辅助 工具 ， 才 能 起 到 事半功倍 的 效果 ， 本 节 就 
来 介绍 一 些 常用 的 辅助 工具 。 


1.4.1 Animatron 移动 开发 软件 


Animatron 是 一 个 功能 强大 的 在 线 交互 动画 编辑 工具 , 采用 最 新 的 HIML 5 技术 , 开发 者 可 以 利用 它 可 
以 创建 各 种 令 人 惊叹 的 HTML 5 动画 以 及 丰富 的 交互 内 容 ， 可 以 随意 设计 和 发 布 ， 无 须 编码 ， 所 见 即 所 得 ， 
分 分 钟 让 用 户 成 为 动画 大 师 。 如 图 1-2 所 示 为 Animatron 软件 界面 。 
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图 1-2 Animatron 软件 界面 


1.4.2 Lungo 移动 开发 软件 


Lungojs 是 一 个 使 用 HTML 5/CSS 3 和 JavaScript 技术 的 移动 Web 开发 框架 ， 可 以 帮助 创建 基于 iOS、 
Android、Blackberry 和 WebOS 平台 的 应 用 程序 。 该 框架 可 利用 当前 移动 设备 的 高 级 特性 ， 可 捕捉 事件 包括 
滑动 、 触 屏 等 。 无 须 使 用 图 片 ， 全 部 采用 向 量 生成 。 

另外 ，Lungojs 无 须 服务 器 端 支持 ， 可 帮助 实现 HTML 5 特 NieTe Lo) 

性 , 包括 WebSQL、Geolocation、History、Device orientation 等 ， Meet the first Mobile 
这 是 一 个 完全 可 定制 的 框架 ， 可 用 来 创建 应 用 、 游 戏 等 程序 。 | 
如 图 1-3 所 示 为 Lungojs 软件 界面 。 i 


垃 avaScript. 




























































































加 1-3 ”Lungojs 软件 界面 
1.4.3 ”DevExtreme 移动 开发 软件 : 
DevExtreme 是 专 为 广大 移动 应 用 开发 用 户 打 造 的 一 个 跨 平 台 HTML 5/JS 框架 ，DevExtreme 分 为 
DevExtreme Mobile 和 DevExtreme Web, 广大 开发 者 可 以 利用 DevExtreme 框架 来 开发 运行 于 iOS、Android、 


WP 等 多 平台 的 应 用 程式 ， 是 目前 跨 平台 开发 的 首选 工具 。 如 图 1-4 所 示 为 DevExtreme 软件 界面 。 









































DevExtreme™ 
DEMOS CREATE 
YOUR THEME 
| 
[2] | 2 eo 
DevAV Sales Dashboard Realtor ThemeBuilder 
« AN 国 国 
3 4 会 加 回 
DXSK8 Stock Market Hotel Booking 

















1-4 ”DevExtreme 软件 界面 


DevExtreme 的 功能 特性 包括 如 下 三 个 方面 。 
。 移动 设备 开发 简化 : 创建 高 反应 度 的 应 用 ， 满 足 了 不 断 变化 的 企业 以 及 BYOD 世界 的 需求 。 使 
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1.4.4 ”RazorFlow 移动 开发 软件 


AN 
HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 
NA 














HIML、CSS 3 和 JavaScript， 从 而 实现 了 外 观 、 感 觉 和 行为 如 原生 应 用 程序 一 样 的 业务 解决 方案 ， 
不 需要 学 习 其 他 更 多 的 语言 或 框架 
。 美观 而 又 身 临 其 境 的 数据 可 视 化 ，DevExtreme 为 智能 手机 和 平板 计算 机 封装 了 易于 使 用 的 HTML 
JavaScript 应 用 程序 ， 包 含 超过 30 种 触摸 优化 的 本 地 UI 小 工具 ， 可 用 于 任何 应 用 程序 的 单个 页 面 。 
。 无 处 不 在 的 原生 用 户 体 验 : 为 iOS、Android、Windows Phone 和 Tizen 打造 原生 视觉 感受 ， 无 须 额 
外 的 编码 或 UI 定制 。 

















































































































RazorFlow 是 一 款 专业 的 PHP 开发 框架 ， 用 户 可 以 








来 创建 适应 不 同 设备 、 不 同 平台 、 不 同 浏览 器 响应 式 的 
HTML 5 仪表 板 , 只 需 加 入 一 个 PHP 文件 就 可 以 输出 数据 


i 


结合 使 用 。 如 图 1-5 所 示 为 RazorFlow 软件 界 


如 1.4.5 Literally Canvas 移动 开发 软件 


绘制 、 控 除 、 设 置 颜色 选择 器 、 撤 销 、 重 做 、 平 移 和 缩 加 
放 等 功能 特点 。 如 图 1-6 所 示 为 Literally Canvas 软件 ml vie 
界面 。 





1 


统 。 
配 1 





























并 且 可 以 和 MySQL 和 PostgreSQL 或 SQLite 数据 库 




















1-5 ”RazorFlow 界面 


Literally Canvas 是 一 款 专 为 HTML 5 开发 人 员 提 供 的 


便捷 画图 工具 ， 为 用 户 准备 了 人 性 化 的 API 接口 , 方便 用 。 跑 
户 根据 自己 的 需求 随意 绘画 、 修 改制 图 内 容 ， 提 高 网 页 开 。 ”名 @ LE ] N 
发 效率 。 

















Literally Canvas 非常 适合 移动 设备 应 用 开发 ， 具 有 


















































图 1-6 Literally Canvas 软件 界面 


1.5 ”HTML 5 移动 开发 编辑 器 


在 编辑 HTML 5 代码 的 过 程 中 , 需要 一 些 开发 编辑 器 , 本 节 就 来 介绍 一 些 常用 的 HTML 5 移动 开发 编辑 器 。 








.5.1 程序 员 必 备 神器 一 一 Sublime Text 3 


Sublime Text 3 是 一 款 程序 员 必 备 代 码 编辑 器 ,也 是 HTML 5 的 文本 编辑 器 ,支持 64 位 和 32 位 操作 系 
Sublime Text 3 在 支持 语法 高 亮 、 代 码 补 全 、 代 码 片 段 (Snippet)、 代 码 折 到 、 行 号 显示 、 自 定义 皮肤 、 
色 方案 等 其 他 代码 编辑 器 所 拥有 的 功能 的 同时 ， 又 保证 了 其 极 快 的 运行 速度 。 另 外 ，Sublime Text 3 也 是 











一 个 跨 平台 的 编辑 器 ， 同 时 支持 Windows、Linux、Mac OS X 等 操作 系统 。 如 图 1-7 所 示 为 Sublime Text 3 
软件 的 开发 工作 界面 。 
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main(String[] args){ 
); 


ARR a 
a.goahead(); 


BigNumber{ 
void goahead(){ 
BigInteger a - BigInteger.valueOf(1€ 
ger b - BigInteger .valueOf(10000) 
out .println(a.add(b)); 
out println(a. subtract(b)); 
System.out .println(a.multiply(b)); 


Compiling JavaForACM.java... 
Running. .. 


[| 





[A 


1-7 Sublime Text 3 软件 开发 工作 界面 


1.5.2 ”可 配置 的 编辑 器 一 一 Atom 


开发 团队 将 Atom 称 为 一 个 “为 21 世纪 创造 的 可 配置 的 编辑 器 ”， 它 拥有 非常 精致 细腻 的 界面 ， 并 
可 配置 项 丰富 ， 加 上 它 提供 了 与 Sublime Text 上 类 似 的 Package Control ( 包 管 理 ) 功能 ， 用 户 可 以 非常 方 
便 地 安装 和 管理 各 种 插件 ， 并 将 Atom 打造 成 真正 适合 自己 的 开发 工具 。 如 图 1-8 所 示 为 Atom 软件 的 开发 


工作 界面 。 






























































{mode)) ? new this({mode, @v 
| 





1-8 Atom 软件 开发 工作 界面 


1.5.3 ”微软 良心 之 作 一 一 VS Code 


Visual Studio Code (简称 VS Code/VSC) 是 一 款 免 费 开 源 的 现代 化 轻 量 级 代码 编辑 器 ， 支 持 几 乎 所 有 
主流 的 开发 语言 ， 具 有 语法 高 亮 、 智 能 代码 补 全 、 自 定义 热 键 、 括 号 匹配 、 代 码 片段 、 代 码 对 比 (Di 企 、 
GIT) 等 特性 ， 支 持 插件 扩展 ， 并 针对 网 页 开发 和 云端 应 用 开发 做 了 优化 ， 软 件 跨 平 台 支 持 Win、Mac 及 
Linux， 运 行 流畅 。 如 图 1-9 所 示 为 Visual Studio Code 软件 的 开发 工作 界面 。 
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AN 
HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 





1-9 Visual Studio Code 软件 开发 工作 界面 





1.5.4 ”流行 的 集成 开发 环境 一 一 HBuilder 


HBuilder 是 DCloud 推出 的 一 款 支 持 HTML 5 的 Web 开发 IDE， 快 是 其 最 大 的 优势 。 其 通过 完整 的 语 


详 





提示 和 代码 输入 法 、 代 码 块 等 方式 ， 大 幅 提 升 HTML、JS、CSS 的 开发 效率 。 同 时 ， 它 还 包括 最 全 面 的 


语法 库 和 浏览 器 兼容 性 数据 。 如 图 1-10 所 示 为 HBuilder 软件 的 开发 工作 界面 。 


| 四 Haulden - HBuilder 





o x 
六 件 (月 ”二 儿 (6) 所 入 0) 祛 义 |O) 和 运 54(S) 咒 江 |G) 本 陀 U 运行 (QJ 发 行 (3| 工具 (1) 视图 (V) 大 了 (H) 
+ 司 EREID a ~ | EN FL 
B-e 
"== ee a] 
| 
| 
| 
， 准备 工作 准备 工作 | 
BEN 
on 新 建 一 个 web 碳 目 9 和 RN 
工作 


|@ HeteHsuider 


信 交 点 本文 件 一 新 建 一 这 择 Webl 日 ( 近 
， 这 避 过 Ed 站 看 当时 | 











[Houder 
Ct | AO XO) 
| 
人 FE 
FR 
a 本 开 烙 HTNL 和 FF 
Sin 
i AD- 
3 Sh 
i | 这 当 
peuilderA] 1 














图 1-10 HBuilder 软件 开发 工作 界面 


1.6 配置 移动 开发 环境 


移动 开发 环境 有 很 多 种 ， 根 据 不 同 的 运行 环境 ， 可 以 分 为 Android 开发 环境 、iOS 开发 环境 、Windows 
了 Phone 开发 环境 等 。 下 面 以 Android 开发 环境 为 例 ， 来 介绍 配置 移动 开发 环境 的 方法 与 技巧 。 
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1. Java 环境 搭建 
搭建 Android 移动 开发 环境 首先 需要 搭建 Java 环境 ， 即 JDK (Java Development Kit)。 对 于 JDK 来 说 ， 





随 着 时 间 的 推移 ，JDK 的 版 本 也 在 不 断 更 新 ， 目 前 JDK 的 最 新 版 本 是 JDK 1.8。 由 于 Oracle (甲骨 文 ) 公 
司 在 2010 年 收购 了 Sun Microsystems 公司 , 所 以 要 到 Oracle 官方 网 站 (https://www.oracle.com/index.html) 
下 载 最 新 版 本 的 JDK。 


1) JDK 下 载 和 安装 。 
JDK 的 下 载 和 安装 步骤 具体 如 下 ; 
(1) 打开 ORACLE 官方 网 站 ， 在 首页 的 栏目 中 找到 Downloads 下 的 Java for Developers 超 链 接 ， 如 图 


1-11 所 示 。 


(2) 单 击 Java for Developers 超 链 接 ， 进 入 Java SE Downloads 页 面 ， 如 图 1-12 所 示 。 


提示 : 由 于 JDK 版 本 的 不 断 更 新 ， 当 读者 浏览 Java SE 的 下 载 页 面 时 , 显示 的 是 JDK 当前 的 最 新 版 本 。 
(3) 单 击 Java Platform(JDK) 上 方 的 DOWNLOAD 按钮 ， 打 开 Java SE 的 下 载 列表 页 面 ， 如 图 1-13 所 








示 ， 其 中 有 Windows、Linux 和 Solaris 等 不 同 平台 环境 下 的 JDK 下 载 。 





Ovewiey | Download。| Documentation | Communt | Technologies | Training 
Sign In/Register Help Country ~ Communilies ~ 1am a 
ORACLE Java SE Downloads 
Products Solutions Downloads Store 
Database Enterpnse Management 

Downto: Oradle Database Oracle Enterprise Manager 

Oracle Database 119 Express Oracle Applcaton Testing Sute 
re Edition See AL 
Java for Ya ler 。 MYSQL 
Java SE orade Berkeley DB stg pdsports Jj 
Solans Oracle Instant Chent Platform, Standard Edition 
Weal Oracle Applicaton Express ne ie Java SE 8u131 

See A sse Java SE 8U131 ncludes important securty fces and bug fxes Oracle strongly recommends that 
orade Fuslon See AlL all Java 3E users upgrade to this release 
Middleware 110 Middleware Loam mor 
Oracle Database Oracle Fusion Mddieware 
Prebuit Developer VMs «(including Oracle WebLogic Server) jp 

Oracle JRocklt .| ee 

One SOA sute apogreone ogo 

See Al Se a = 









































书 使 用 的 是 64 位 版 的 Windows 操作 系统 ， 因 
jdk-8u131-windows-x64.exe 超 链接 ， 单 击 下 载 DK， 如 图 1-14 所 示 。 


1-11 ”oracle 官方 网 站 的 首页 1-12 Java SE Downloads 页 面 


(4) 下 载 前 ， 首 先 选中 Accept License Agreement (接受 许可 协议 ) 单 选 按钮 ， 接 受 许可 协议 。 由 于 本 
此 这 里 选择 与 平台 相对 应 的 Windows x64 类 型 的 
































Java SE Development Kit 8u131 
You must accept the Oracle Dinary Code Litenee Areement for Java SE to downioad this 


口 Accept License Agreement ®) Decline License Agreement 
File Size Download 
7787 MB §jck-8u131-inut-arm32.vip-hft iar gz 
7481 MB Sjdk-8u131-inu-arm64-viphMlt far ge 
164 66 MB Sjck- Bu131-inune-586 rpm 
17939 MB §jok-8u131-in-i585.tar gz 
162 11 MB jck-Bu131-inuex64 rpm 
17695 MB 5jck-Gu131inuex64 tar gz 
22657 MB_§jck-8u131:macosxx64 dmg 
13979 MB $jck-8u131-solaris-sparev9 :ar 2 
99 13 MB_ Sjck-8u131-solaris-sparov9 ar gz 
14051 MB jck-0u131-solaris-x64 ar Z 
96 96 MB 蔚 jok-8u131-solaris-r64 ar gz 
19122 MB jck-8u131-windows-i586.exe 
19803 MB jok-8u131-windows-x64.exe 


Java SE 的 下 载 列表 


Product / File 
Linux ARM 32 Hard Float ABI 
Linux ARM 04 Hard Float A 


Solaris SPARC 64-bit 
Solarisx64 
Solarisx64 

Windows x86 
Windows x54 





1-13 


(5) 下 载 完 成 后 ， 在 硬盘 上 会 发 现 一 个 名 为 jdk-8u131-windows-x64.exe 的 可 执行 文件 ， 双 击 运行 


现 JDK 的 安装 界面 ， 如 图 1-15 所 示 。 











Java SE Development Kit 8u131 
You must accept the Oracle Binary Code License Aoresment for Java SE to download this 


Thank you for accepting the Oracle Rinay (cae icense Aoreement for Java SF: you mal 
OV Oow downdoacd this sofiware! li 


Proguct/ File Descnption File Se Download 
Linwx ARM 32 Hard Float AB| 77 87 NB $jck-Bu131-Intc-arm32-vip-hft tar gz 
Unwx ARM 64 Hard Float ABL 74.81 MB jdk -Su131-inoc-arm64-vip-hft tar gz 
Unwxx85 154 66 NB $jok-Bu131-Inup-586. pm 
Unwxx85 17939 MB $jdk-u131-Inuwc-586 iar gz 
Linwe x64 16211 MB jdk-8u131-Inu-x64.rpm 
Ln x64 17695 MB $jok-du131-inux-x64.tar. gz 
Nac OSX 22657 MB $jok-8u131-macosx-x64.dmg 


13979 NB §jok-Au131-solarie-sparcvO tar 7 
9913 MB jdk Su{31-solario-sparcr9 tar gz 
14051 MB jok-8U131-solaris-x64 tar.Z 
6 9 MB $jdk-Bu131-solaris-x64 tar. gz 
191.22 MB_ jok-8u131-windows-i586 .xe 


19805 MB Siacut3L vngowe 04 gn) 
1-14 下 载 JDK 
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SN 
a RA ( 超 值 版 ) 
NA 


(6) 单 击 “ 下 一 步 ” 按 钮 ， 进 入 “定制 安装 ”界面 ， 在 其 中 选择 组 件 及 JDK 的 安装 路 径 ， 这 里 修改 
为 D:Vavayjdk1.8.0_ .131N\， 如 图 1-16 所 示 。 
































凑 J SE Development KGt 8 Update 131 ICHDN - 安 法 地 x 兰 Jeve EDevelopment Kt 0 Update 131 (64-bi0 让 出 安 驴 x 
« « 
三 java 入 ”Java 
区 迎合 用 二 下 开发 具 包 Update si 提交 半身 导 A Se 
2 
本 向 号 村 指导 入 完成 va 开发 工具 忆 EUbcate :31 的 安装 过 各 7] ove EDevelooment tg 
天 于 Ee 
可 公共 了 aa en 
hs 
羽衣 
Java Msaon Contra 分 析 可 区 才 工具 大伯 天 在 作为 .Dk 有 的 和 分 拉 供 。 
DiDavaydkL80_13BN | BO 
[2 <E-$W [TF-S00> ] | 开放 
1-15 ”JDK 的 安装 界面 1-16 “定制 安装 ”界面 


提示 : 修改 JDK 的 安装 目录 ， 尽 量 不 要 使 用 带 有 空格 的 文件 夹 名 。 

(7) 单 击 “ 下 一 步 ” 按 钮 ， 进 入 安装 进度 界面 ， 如 图 1-17 所 示 。 

(8) 在 安装 过 程 中 , 会 出 现 “ 目 标 文件 夹 ”窗口 , 选择 JRE 的 安装 路 径 , 这 里 修改 为 D:Wavayjre1.8.0_131， 
如 图 1-18 所 示 。 












































期 Java SE Development Kit 8 Update 131 (64-biD - 进度 一 Java 普法 - 瑟 标 文件 夫 一 x 
人 « 
三 "java 至 ?Java 
基态。 正在 昌文 伯 目标 文件 夹 
es 
音 二 要 改 "以 将 Java 安装 到 他 文件 去 ， 
Bienes 
i Er= el 
图 1-17 安装 进度 界面 图 1-18 “目标 文件 夹 ”窗口 
(9) 单 击 “下 一 步 ” 按 钮 ， 安 装 JRE。 安 装 完成 
后 ， 弹出 “JDK 安装 完成 ” 界面 ， 如 图 1-19 所 示 。 [Le x 
已 Ea ~ 也 ) 
(10) 单 击 “ 关 闭 ” 按 钮 ， 完 成 JDK 的 安装 ， 这 三 java 
时 会 在 安装 目录 下 多 一 个 名 称 为 jdk1.8.0_131 的 文件 EOersepnent etS Udate 31(6Ho0 已 RN 





夹 ， 打 开 文 件 夹 ， 如 图 1-20 所 示 。 
JDK 的 安装 目录 下 有 许多 文件 和 文件 来， 其 中 重 


和 局 

















要 的 目录 和 文件 的 含义 如 下 。 
。 bin: 提供 JDK 开发 所 需要 的 编译 、 调 试 、 运 [ES | 
行 等 工具 , 如 javac、java、javadoc、 appletviewer 
等 可 执行 程序 。 
。 db: JDK 附带 的 数据 库 。 图 1-19 JDK 安装 完成 界面 


。 include: 存放 用 于 本 地 要 访问 的 文件 。 
。 jre: Java 运行 时 的 环境 。 





010 


。 lib: 存放 Java 的 类 库 文件 ， 即 Java 的 工具 包 类 库 。 








。 src.zip: Java 提供 的 类 库 的 源 代 码 。 
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加 | 回 罩 :|idklso131 二 口 x 
EZ 主页。 共享 ”要 可 © 
€ 个 国 ， 此 电脑 安装 前 (D;) > java > jdk1.8.0 131 > v 已 | 这 志 万 

本 大 4 
并 快速 访问 
四 bin 
全 OneDrive 国 db 
》 国 此 电脑 四 indode 
由 ji 
臣 网 千 是 mb 
] COPYRIGHT 4KB 
性 javafxsrczip E4978KB 
] ucENSE 1KB 
[O README.html 1KB 
了] release KB 
时 :ezip 3 0761 KB 
] THIRDPARTYLICENSEREADME.bet 173 KB 
] THIRDPARTYUICENSEREADME-JAVAF-。 2017, 63 KB 
13 个 项 目 转 旧 











1-20 jdk1.8.0_131 文件 夹 


提示 : JDK 是 Java 的 开发 环境 ，JDK 对 Java 源 代码 进行 编译 处 理 ， 它 是 为 开发 人 员 提 供 的 工具 。JRE 
是 Java 的 运行 环境 , 它 包 含 Java 虚拟 机 (JVM ) 的 实现 及 Java 核心 类 库 , 编译 后 的 Java 程序 必须 使 用 JRE 
执行 。 在 JDK 的 安装 包 中 集成 了 JDK 和 JRE， 所 以 在 安装 JDK 的 过 程 中 提示 安装 耻 E。 


2) JDK 配置 。 





对 于 初学 者 来 说 ,环境 变量 的 配置 是 比较 容易 出 错 的 ， 配置 过 程 中 应 当 仔 细 。 使 用 JDK 需要 对 path 和 





classpath 两 个 环境 变量 进行 配置 。 
path 环境 变量 是 告诉 操作 系统 Java 编译 器 的 路 径 。 


下 面 是 在 Windows10 操作 系统 中 ， 环 境 变量 的 配置 方法 和 步骤 。 
具体 配置 步骤 如 下 : 





(1) 在 桌面 上 右 击 “此 计算 机 ”图 标 ， 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ， 如 图 1-21 所 示 。 






































(2) 打开 “系统 ”窗口 ， 选 择 “ 高 级 系统 设置 ”选项 ， 如 图 1-22 所 示 。 
系统 一 口 x 
个 加 «系统 和 安全 ， 系 统 ~ 已 。 玫 夫 控制 画板 记 
文件 篇 名 (E) 埋 看 (V) 工具 (T) 帮助 (H) 
四 

er 查看 有 关 计算 机 的 基本 信息 

加 认 生生 人 器 Windows 版 本 

四 运 民 2 于 国 曾 

四 至 入 大 

9 图 Windows10 
Se 














1-21 选择 “属性 ”命令 


图 1-22 选择 “高 级 系统 设置 ”选项 
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(3) 打开 “系统 属性 ”对 话 框 ， 选 择 “ 高 级 ”选项 卡 ， 单 击 “环境 变 量 ” 按 钮 ， 如 图 1-23 所 示 。 
(4) 打开 “环境 变量 ”对 话 框 ， 在 “系统 变量 ”下 单 击 “ 新 建 ”按钮 ， 如 图 1-24 所 示 。 









































属性 x asa x 
计算 机 名 “而 作 。 高 员 。 系 纺 剑 六 远 和 demo 的 用 产 三 县 In) 
要 进行 大 儿 数 更 交 ， 你 必须 作为 管理 员 登 录 ， ba 全 
| OneDrive CNUsersdomovoncDrive 
性 Path HUSERPRONL EAppData\ocal\WicroscfWindowsApp: 
视 党 效 蛙 ,处 理 器 十 划 ， 内 存 使 用 .以 及 虚 划 庆 存 TEMP 6USERPROPLEYWppDatavLocaNTemp 
Twp 36USERPROPILEWWppDatavoceNTemp 
| 
用 户 本 可 文件 
5 未必 记 从 天 的 这 和 | we | (ene 
本 Zsa 
| 青 [1 
PP PROCESSOR LEVEL 6 
| PRocEssog REvslon 。 seos 
素 绾 启动、 系统 故 和 和 调 二 信息 PSModulepath %programFies%\WindowsPowerShelNModules:C\Windows\. 
TEMP CAWindows\TEMP 
mi Twp CWindows\TEMP 
| usawve SvsTEN 
windir CWindows 
a | 
确定 取消 应 司 ( mE | 
1-23 “系统 属性 ”对 话 框 1-24 “环境 变量 ”对 话 框 


(5) 打开 “新 建 系统 变量 ”对 话 框 ， 在 弹出 的 对 话 框 的 “变量 名 ”中 输入 path,“ 变 量 值 ”为 安装 JDK 
的 默认 bin 路 径 ， 这 里 输入 D:Wava\jdkl1.8.0_131\bin， 如 图 1-25 所 示 。 单 击 “ 确 定 ” 按 钮 ，path 环境 变量 配 
置 完成 。 























Ee x 
这 是 名 (N): path 
变量 值 V): DjavaVdk1.80.131\bin 

注目 录 (D)-. E27 取消 





图 1-25 输入 path 变量 名 和 相应 变量 值 
Java 虚拟 机 在 运行 某 个 Java 程序 时 ， 会 按 classpath 指定 的 目录 顺序 去 查找 这 个 Java 程序 ， 配 置 
classpath 环境 变量 的 步骤 如 下 。 
(1) 参照 配置 path 环境 变量 的 步骤 ， 打 开 “ 新 建 系统 变量 ”对 话 框 ,“ 变 量 名 ”输入 classpath, “变量 
值 ”为 安装 JDK 的 默认 lib 路 径 ， 这 里 输入 D:java\jdk1.8.0_131\Jib， 如 图 1-26 所 示 。 














六 素 统 交 量 x 
二 2(N): [dlasspath 
雪 旺 二 WV): DNava\dk1.8.0.131\ib 














i | = 
图 1-26 输入 classpath 变量 名 和 相应 变量 值 
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(2) 单 击 “ 确 定 ” 按 钮 ，classpath 环境 变量 配置 完成 。 

提示 : 配置 环境 变量 ， 多 个 目录 间 使 用 分 号 (:) 隔 开 。 在 配置 classpath 环境 变量 时 ， 通 常 在 配置 的 目录 
前 面 添 加 点 (.)， 即 当前 目录 ,使 .class 文件 搜索 时 首先 搜索 当前 目录 ， 然 后 根据 classpath 配置 的 目录 顺序 依 
次 查找 ， 找 到 后 执行 。 

3) 测试 JDK。 

JDK 安装 、 配 置 完 成 后 ， 可 以 测试 其 是 否 能 够 正常 运行 。 具 体操 作 步 骤 如 下 : 

(1) 右 击 “开始” 按钮 ， 在 弹出 的 快捷 菜单 中 选择 “运行 ”命令 , 打开 “运行 ”对 话 框 , 输入 命令 cmd， 
如 图 1-27 所 示 。 

(2) 单 击 “ 确 定 ” 按 钮 打开“ 命令 提示 符 ” 窗 口 ， 输 入 java -version， 并 按 Enter 键 确认 。 系 统 如 果 
输出 JDK 的 版 本 信息 ， 则 说 明 JDK 的 环境 搭建 成 功 ， 如 图 1-28 所 示 。 


























而 含 提 地 答 - GB 其 

















1-27 输入 命令 图 1-28 JDK 环境 搭建 成 功 

注意 : 在 命令 提示 符 下 输入 测试 命令 时 ，Java 和 减 号 之 间 有 一 个 空格 , 但 减 号 和 version 之 间 没 有 空格 。 

2. 安装 Android Studio 

Java 环境 搭建 完成 后 ， 就 要 安装 Android Studio， 它 是 集成 开发 环境 ， 包 含 了 Android 开发 所 必需 的 
Android SDK (Software Development Kit)， 以 及 开发 Android 应 用 程序 时 所 需要 的 工具 ， 例 如 Android 模拟 
器 、 调 试 工具 等 。 

1) Android Studio 下 载 和 安装 。 

Android Studio 下 载 和 安装 的 具体 步骤 如 下 : 

(1) 在 浏览 器 中 输入 下 载 Android Studio 的 网 址 http://www.android-studio.org/， 读 者 可 根据 自己 操作 系 
统 下 载 相应 的 软件 ， 这 里 下 载 “Windows (64 位 ) 包含 Android SDK” 的 Android Studio， 单 击 下 载 保 存 即 
可 ， 如 图 1-29 所 示 。 





























android 





studio-ide- 
1524059837- 















1-29 下 载 Android Studio 
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oy 
如 图 1-30 所 示 。 

(3) 单 
为 必 选 项 ，Android SDK (SDK 了 
勾 选 后 如 图 1-31 所 示 。 








下 载 完成 后 , 双击 android-studio-bundle-162.4069837-windows.exe 文件 , 进行 安装 , 打开 欢迎 界 

















5 Next 按钮 ， 打 开 Choose Components 窗口 ， 可 以 看 到 ，Android Studio 属 IDE 的 工具 部 分 ， 
[ 具 包 ) 和 Android Virtual Device (虚拟 机 部 分 Performance) 为 可 选项 ， 





A Android Studio Setup 






Welcome to Android Studio Setup 


Setup wl guide you through the nstalation of Android 
Studio, 


tis recommended that you dose al other applcations 
before starting Setup. Ths wii make It possible to update 
relevant system files without having to reboot your 
computer, 


Clck Next to continue. 


sa es] [aa 
1-30 Android Studio 安装 界面 





(5) 单 击 IAgree 按钮 后 , 打开 Configuration Settings 窗口 ， 单 刘 


Android SDK 的 安装 路 径 ， 如 图 1-33 所 示 。 


Android Studio Setup 


Press Page Down to see the rest of the agreement, 


Lcense Agreement 
Please review the license terms before instaling Androd Studio， 





[ro get started with the Android SDK, you must agree to the folowing terms and 
[condtions. 


[This is the Androd SDK License Agreement (he ‘Lcense Agreement”) 
1 Introduction 


1.1 The Android SDK (referred to in the License Agreement as the SDK" and specificaly 
|ndudng the Androld system fles, packaged APIs and SDK lbrary fles and tools , fand 
|when they are made available) is icensed to you subject to the terms of the License 
|Agreement. The License Agreement forms a legally bnding contractbetween youand = v 
If you accept the terms of the agreement dick 1 Agree to continue. You must accept the 
agreement to install Android Studio, 





rere 





mm Android Studio Setup x 
Choose Components 
A Choose which features of Android Studio you want to instal 

Check the components you want to nstall and undhedk the components you don't want to 
Instal, Oick Next to contnue, 
Select components to instal: 一 Lent 

回 Androdd SOK 

回 Androd Virtual pevice 
Space requred: 5.1GB 

<Back Next > Cancel 








1-31 Choose Components 窗口 
(4) 单 击 Next 按钮 , 打开 License Agreement 窗口 ， 单 击 IAgree 按钮 接受 许可 协议 , 如 图 1-32 所 示 。 





6 Browse 按钮 , 分 别 选 择 Android Studio 








Androd SOK Instalaton Location 


The location speafied must have at least 3.2G8 of free space. 
Chck Browse to customize: 


Dowerodies 


Android Studio Setup 


Androd Studo Installaton Locaton 


The location specified must have at least 500MB of free space, 
Chck Browse to customize: 


[cswnaodyndodsudo 


Configuration Settings 
Instal Locatons 


Browse,.. 





lr 


Cancel 





1-32 License Agreement 窗口 

















图 1-33 Configuration Settings 窗口 






























































(6) 上 Next 按钮 ， 打 开 Choose Start Menu Folder 窗口 ， 如 图 1-34 所 示 。 

(7) 单 击 Install 按钮 ， 安 装 Android Studio， 如 图 1-35 所 示 。 

(8) 稍 等 片刻 ， 弹 出 Installation Complete 窗口 ， 如 图 1-36 所 示 。 

(9) 单 击 Next 按钮 ， 弹 出 Completing Android Studio Setup 窗口 ， 安 装 完成 ， 如 图 1-37 所 示 。 
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三 Android Studio Setup = x om Android Studio Setup 
Choose Start Menu Folder Installing 
Choose a Start Menu folder for the Android Studio shortcuts. Please wait whie Android Studio is being installed, 
Select the Start Menu folder in which you would lke to create the program's shortcuts. You Extracting Android SDK... 89% (4173 / 4653 MB) 
Can ao enter aname to create a new folder 
esod sudol Output fader: D: Wrcrod Wndrod Stucdo Prugrs Wt assstantWb 加 | 
SR ps Extract urhassstont jar... 100% 
Accessibdity Dutput folder: D: Vndrod Vandroid Studo plugnsWwaml 
Accessories Dutput folder: D:WndrodWndrold Studio\plugns\yami Yib 
A Took che Io0% 
FE eract resources_enJ 
Apache Tomcat 9.0 Tomcat9 Extract yamljar,， 100% 
Hypersnap 7 Dutput folder: D: Wndrod Vindroid Studio 
eve Deveooment it Output fader: Csioers eno VpnData bocalTenp 
Microsoft Office 2013 Extract android -sdk. 72 
Microsoft Silveright ba Dutput folder: D:Wndrod edk | 


Doonot oeate shortauts 














1-34 Choose Start Menu Folder 窗口 图 1-35 安装 Android Studio 
a Android Studio Setup 一 本 Android Studio Setup 
Installation Complet: 
ER ee di Completing Android Studio Setup 
Completed Androd shudo has been nstaled on your computer 
Clk Frish to dose Setup, 
rtract: androd sdk 7 F 


Output folder: D: Androidiedk 

Delete fle: C:\Wsers Hemo AppDataLocal\Temp androd-sdk. 7: 

Output foider: DiWndrodWndrod Shudo 

Output foider: C: programOata Wc osoft Wndows\Start Menu\programs Andrord St 
Create shortaut C: programData Wcrosoft Windows\Start Menu\programs ndrod 
Output folder: Csers Hemo 

Create folder: C: sers\Hemo\androd\gtudo 

Create folder: C:\sers Hemo\ androd \studio Vnstaler 

Completed 


加 Start Androd Sudio 





图 1-36 Installation Complete 窗口 1-37 Completing Android Studio Setup 窗口 


(10) 单 击 Finish 按钮 ，Android Studio 安装 完成 ， 然 后 进行 软件 更 新 ， 完 成 后 单 击 Finish 按钮 即 可 进 
入 Android Studio 欢迎 界面 ， 如 图 1-38 所 示 。 


® Welcome to Android studio 一 x 


区 


Android Studio 
































区 Start a new Android Studio project 

DD Open an existing Android Studio project 

章 Check out project from Version Control ~ 
t¥ Import project (Eclipse ADT, Gradle, etc) 


t¥ Importan Android code sample 


亲 Configure - GetHelp ~ 


1-38 Android Studio 欢迎 界面 
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2) SDK Manager 管理 。 

Android Studio 2.3.3 安装 完成 后 ， 单 击 Start a new Android Studio project 超 链 接 ， 进 入 Android Studio 
开发 工具 ， 由 于 SDK Manager 更 新 、 下 载 速度 特别 慢 ， 因 此 需要 在 进行 实际 项 目 开发 前 进行 更 新 、 下 载 ， 
具体 操作 如 下 。 

(1) 首先 修改 hosts 文件 ， 打 开 目 录 C:\Windows\System32\drivers\etc， 使 用 记事 本 打开 目录 中 的 hosts 
文件 ， 添 加 如 下 内 容 到 hosts 文件 的 最 后 。 

203.208.46.146 www.google.com:; 

74.125.113.121 developer.android.com:; 

203.208.46.146 dl.google.com:; 

203.208.46.146 dl-ssl.google.com。 

注意 : 在 添加 时 不 修改 原来 文件 的 内 容 ， 只 是 附加 这 些 内 容 。 

提示 : 由 于 每 个 网 站 对 应 一 个 瑟 地 址 ， 在 打开 域名 。 pe ves widss Heb 























时 需要 使 用 DNS 服务 器 解析 成 全 地 址 ， 然 后 才能 访问 。 2 本? 
而 在 hosts 文件 中 加 入 了 Android Studio 获取 更 新 链接 和 ry 


IDE Scripting Console 


下 载 链接 的 网 址 及 其 对 应 的 瑟 地 址 ， 这 样 就 省 去 了 DNS J rrebose 
解析 这 一 步 , 从 而 节约 了 时 间 , 提高 了 更 新 、 下 载 的 速度 。 
(2) 在 SDK 的 安装 目录 下 找到 SDK Manager.exe， 双 
打开 该 文件 。 或 者 在 Android Studio 2.3.3 中 选择 Tools 
一 Android 一 SDK Manger 选项 ， 如 图 1-39 所 示 。 
(3) 打开 Default Settings 窗口 ， 单 击 Launch 





和 时 


© Frebase App Indexing Test 











图 
Standalone SDK Manager 超 链接 ， 如 图 1-40 所 示 。 1-39 选择 SDK Manager 选项 
® Defauk Settings x 
Qa ) Appearance & Behavior, System Settings，Android SDK 
Appearance a Behavior Manager for the Android SDK and Teols used by Android Sudio 
Appearance Android SDK Location: | DAndroid\sdk | Edt 
RS 有 ER sox oot: | sok Updote site| 
T System Settings Each Android SDK Platform package includes the Android Platform and sources pertaining to an API 
eo level by default. Once installed, Android Studio will automatically check for updates, Check "show 
package details" to display individual SDK components. 
HT proxy 
上 二 Name | Apllevel | Revision | Status 
Updates BB Android null 26 2 Partialy installed 
Usage Statictice 加 Android7.1.1 (Nougat) 25 3 partialy installed 
回 Android 7.0 (Nougat) 24 2 
Android 60 (Marchmalow) 23 3 
Notifications Android 5.1 (Lolipop) 22 2 
Re 回 Android so (Lolipop) 2 2 
ee @ Android 4.4W (Kitkat Wean) 20 2 
Path Variables 8 Android 44 (Kitkat) 19 4 
EY Android 4.3 Uely Bean) 18 和 
Wap Android 42 Uely Bean) 17 3 
» Editor 回 Android 41 Uecly Bean) 16 5 
ina 回 Android 403 (IceCreamSandwich) 15 5 
加 Android 40 (IceCreamSandwich) 14 4 
» Build. Execution Deployment Android 3.1 (Heneycomb) 12 3 
Android 3.0 (Heneycomb) 11 和 
rn 回 ndroid 233 (cingerbread) 10 2 














图 1-40 ”Default Settings 窗口 





(4) 打开 Android SDK Manager 窗口 ， 选 择 Tools 一 Options... 选 项 ， 如 图 1-41 所 示 。 
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Android SDK Manager 一 口 说 
Ap Rev Status | 
Y OR Tools Prevew Channel) 
Df Android SOK Build tools 26 re2 E Not natalled 
~ Or Android 8.00 (Apl 26) 
口 闹 SDK platorm 26 2 攻 Installed 
国 hndroilTVnte1xB5hiom System Image 3 3 Notinsalled 
回 Andro Woar intol x06 Mtom Sytom mags 265 1 ENoeinatolod 
Google pay ntelx86 Mom System Image 26 4 TNotinstaled 
回国 Google APls Intelx86 Atom System Image = 25 4 DNotinstalled 
Y OD Android 7.1.1 (API 25) 
口 唤 SDK platorm 25 3 配 Installed 
口 国 AndroidTV /nielya6 biom Sstom Image 25 5 © Notinstalled v 
Shew Updates/New Instolled Select New orUpaatss Instell 7 packeges.. 
Dobsolete Desalect Al Delete 2 packsges- 
Done loading packages. © 





1-41 选择 Options... 选 项 


(5) 打开 Android SDK Manager - Settings 窗口 ， 在 HITP Proxy Server 文本 框 中 输入 mirrors.neusoft.edu.cn， 
在 Http Proxy Port 文本 框 中 输入 80, 在 Others 选项 组 中 勾 选 Force https://.…sources to be fetched using http://… 
复 选 框 ， 如 图 1-42 所 示 。 

(6) 单 击 Close 按钮 ， 在 Android SDK Manager 窗口 中 选择 Packages 一 Reload 按钮 ， 更 新 加 载 所 有 的 
Packages， 勾 选 Packages 下 的 Tools 和 Extras 文件 夹 以 及 其 他 Android 版 本 中 的 全 部 SDK Platform 复 选 框 ， 
并 单 击 Install 94 packages... 按 钮 ， 如 图 1-43 所 示 。 


画 Andreid SDK Manager 三 
Packages Tools 
SDK Path: Di\Android\sdk 























Pockeges 
画 Android SDK Manager - settings x Nm pl | Rov | Sebws pF 
Proxy Settings MO Tools 
HTTP prow Seer [rrorereuroe enuen | Br Took Preview horned 
-一 一 一 26 re2 © Notinetaled 
HPPprogforlso | 
Manifest Cache 
Direaory. CAUsers\demoVandroidcache 
currentsize 711 Ki 
回 Use download cache Clear Cache 
Others 下 v 
Ee 人 
口 Ask before restarting ADB 
回 Enable Preview Tools Dobsolete Deselect Al Delete 35 packages.. 
Close Dene loading packages Ow 
图 1-42 Android SDK Manager - Settings 窗口 图 1-43 Android SDK Manager 窗口 


(7) 在 打开 的 Choose Packages to Install 窗口 中 选中 Accept License 单 选 按钮 ， 并 单 击 Install 按钮 ， 如 
图 1-44 所 示 。 


(8) 稍 等 片刻 ， 安 装 完成 后 选择 Packages 一 Reload 按钮 进行 更 新 ， 即 可 操作 完成 。 
3. Android Studio 开发 工具 介绍 


Android Studio 是 一 个 集成 的 Android 开发 环境 , 基于 IntelliJ IDEA。 类 似 Eclipse ADT，Android Studio 
提供 了 集成 的 Android 开发 工具 用 于 开发 和 调试 。 
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Choose Packages to Install 司 “ 居 
= Package Descrption& License 
YW Mndroid SDK License 次 
V Android TV Intel x85 Atom Syst) 。 - Android Tv Irtel x85 Atom System Image Android API 25, 
we Gcogle apls ARM 64 vea syste 国 revisons 


Apls ARM 64 vBa System Image, Android AP125， 







Geogle APls ARM EABI va Sy: 
Geogle Apls Intel xa6 Atom 54 
VW Geogle Apls Intel x86 Atom Sy: 
VW Android TV Intel x85 Atom Syst 


APls ARM EABI v/a System Image Android Apl 25, 


Apls ntel x36 Atom_64 System Image Android AP1 25, 
ion7 
le Apls Intel x36 Atom System Image Android AP1 25, 








~ Android TV Intel x85 Atom System Image Android AP 24, 
revision 11 


VW Intel x86 Atom System Image, 
YA Google play Intel x86 Atom Sye ~ ARM 64 vea System Image, Android API 24, revision 7 
Google Apls ARM 64 vaa Syste | -ARM EABI v7a System Image. Andrcid API 24. revision 7 


V Geogle APls ARM EABI Via Sy v| | accopt — Roca copy wo dipbord | prt 








CD 
图 1-44 Choose Packages to Install 窗口 


下 面 详细 介绍 Android Studio 各 个 模块 的 功能 使 用 。 
(1) 运行 和 调试 区 域 。 

这 个 区 域 是 运行 和 调试 相关 的 操作 ， 如 图 1-45 所 示 。 该 区 域 操 作 从 左 到 右 ， 依 次 介绍 如 下 。 

(人 Make Project: 编译 项 目 。 

@) Select Run/Debug Configuration: 当前 项 目的 模块 列表 ， 用 于 运行 或 调试 配置 。 

图 Run: 运行 。 

@@ Debug: 调试 。 

加 Run with Coverage: 测试 显示 模块 代码 的 覆盖 率 。 

@ Attach debugger to Android process: 将 debug 进程 添加 到 当前 进程 中 ， 调 试 Android 运行 的 进程 。 
@) ReRun: 重启 。 

Stop: 停止 。 

(2) Android 设备 和 虚拟 机 区 域 。 

这 个 区 域 主要 是 与 Android 设备 和 虚拟 机 相关 的 操作 , 如 图 1-46 所 示 。 该 区 域 从 左 到 右 , 依次 介绍 如 下 。 


Re ?999 





























> 





Gore bi El7? 
1-45 ”运行 和 调试 区 域 1-46 ”Android 设备 和 虚拟 机 区 域 
人 AMD Manager: 虚拟 设备 管理 。 
@ Sync Project with Gradle Files: 同步 工程 的 Gradle 文件 , 一 般 在 Gradle 配置 被 修改 时 需要 进行 同步 。 
图 Project Structure: 项 目 结构 ， 主 要 作用 是 对 项 目 结构 进行 设置 。 
@ SDK Manager: Android SDK 管理 器 。 
(3) 文件 资源 区 域 。 
这 个 区 域 主要 是 工程 文件 资源 等 相关 的 操作 ， 如 图 1-47 所 示 。 该 区 域 具 体 介绍 如 下 。 
@ 项 目 中 文件 的 组 织 方式 ， 默 认 是 Android， 还 可 通过 下 拉 列 表 选 择 Project、Packages、Scratches、 























ProjectFiles、Problems... 等 ， 最 常用 的 是 Android 和 Project 两 种 。 
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@) 定位 当前 打开 文件 在 工程 目录 中 的 位 置 。 
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@ 关闭 工程 目录 中 所 有 的 展开 项 。 
@ 额外 的 一 些 系统 配置 ， 单 击 后 打开 一 个 弹出 菜单 ， 如 图 1-48 所 示 。 选 中 Autoscroll to Source 和 
Autoscroll fom Source 两 个 选项 后 ，Android Studio 会 自动 定位 当前 编辑 文件 在 工程 中 的 位 置 ， 非 常 方便 。 























Hlatten Packages 
VY Cempact Empty Middle packages 


Autoscroll to Source 
Autoscrol from Source 
» @® Gradle Scripts Sort by Type 

Vv Folders Always on Top 











1-47 文件 资源 区 域 1-48 “在 弹出 的 菜单 中 选择 选项 


(4) 编写 和 布局 区 域 。 
这 个 区 域 是 用 来 编写 代码 和 设计 布局 的 ， 具 体 如 图 1-49 所 示 。 该 区 域 功能 介绍 如 下 。 


了 activity helloxml x Preview 次 -| 











RelativeLayout 


android: puddingRieht™ 16dp” 


paddingTop™ 16dp” 
texte com example. deme. bhellowe| 





区 相 二 © A 
1-49 编写 和 布局 区 域 


。 打开 文件 的 Tab 页 。 
。 布局 编辑 模式 切换 ， 一 般 使 用 Text 模式 ， 初 学 者 可 以 使 用 Design 模式 编辑 布局 ， 再 切换 到 Text 




















模式 。 
。 UI 布 局 预览 区 域 。 
。 编写 代码 区 域 。 
(5) 输出 区 域 。 
这 个 区 域 大 部 分 是 用 来 查看 一 些 输出 信息 的 ， 如 图 1-50 所 示 ， 该 区 域 功能 介绍 如 下 。 



















Messages Gradle Build 准 - 二 | [Gradie Console 间 - 二 | 

站 Gradle tasks [:app:clean, | lene 

0 apprgenerateDebugAndroidTestSources, 
:appamockablehndroidjar 


©@ Bultp sucCcESsFUL 










BUILD S0cCESSFOL 







x 
全 
各 






Total time. 59 678 secs 


A 回路 


图 1-50 输出 区 域 
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Android Monitor (监控 ): 显示 应 用 的 一 些 输出 信息 。 

Messages (信息 ): 显示 工程 编译 的 输出 信息 。 

Terminal (终端 ); Android Studio 自 带 的 命令 行 面板 ， 用 于 进行 命令 行 操作 。 

Run (运行 ): 显示 应 用 运行 后 的 一 些 相关 信息 。 

TODO: 显示 标 有 TOTO 注释 的 列表 。 

Event Log (事件 )， 显 示 一 些 事件 的 日 志 。 

Gradle 控制 台 (Gradle Console): 显示 Gradle 构建 应 用 时 的 一 些 输出 信息 。 

在 使 用 Terminal 时 ， 需 要 配置 环境 变量 ， 具 体 如 下 : 

。 在 系统 变量 中 配置 变量 名 为 ANDROID_ HOME 的 变量 ， 其 值 是 sdk 的 安装 目录 ， 本 书 是 
D:\Android\sdk。 

。 将 Android SDK 中 adb 目录 配置 在 path 环境 变量 中 ， 在 系统 变量 path 后 面 添 加 “%ANDROID_ 

HOME%\platform-tools”， 启动 Android Studio 即 可 。 









































1.7 ”开发 移动 网 站 基础 


在 开发 移动 网 站 时 ， 首 先 需 要 记 住 的 是 ， 移 动 网 站 也 只 是 一 个 网 站 。 而 最 好 的 网 站 应 当 适 用 于 所 有 浏 
览 器 及 操作 系统 ， 或 者 说 尽量 多 的 浏览 器 及 操作 系统 。 除 此 之 外 ， 在 为 移动 设备 创建 网 站 时 ， 还 需要 考虑 
以 下 几 个 基本 问题 ， 本 节 就 来 进行 详细 介绍 。 


1.7.1 ”移动 设备 屏幕 适 配 


移动 设备 的 屏幕 适 配 情况 包括 屏幕 尺寸 大 小 和 分 辩 率 。 一 般 情况 下 ， 移 动 设备 的 屏幕 尺寸 要 比 台 式 计 
算 机 小 。 目 前 ， 主 流 智能 手机 包括 以 下 几 种 标准 尺寸 : 
e 1280px X720px: 如 小 米 5.0 尺寸 的 手机 。 
。 1280px x 800px: 如 魅族 MX2 4.4 尺寸 的 手机 。 
。 1080px X1920px: 如 华为 麦 芒 系 列 手 机 。 
平板 计算 机 不 仅 拥有 越 来 越 大 的 屏幕 尺寸 ， 而 且 在 浏览 方式 上 也 有 所 不 同 。 例 如 ， 大 部 分 平板 计算 机 
以 及 一 些 智能 手机 都 能 够 以 横向 或 纵向 模式 进行 浏览 。 这 样 ， 同 一 款 设 备 ， 屏 幕 的 宽度 有 时 为 1024px， 有 
时 则 为 800px 或 更 少 。 
但 通常 ,平板 计算 机 提供 了 更 大 的 屏幕 空间 , 可 以 认为 在 大 部 分 平板 计算 机 设备 上 , 屏幕 尺寸 为 (1024 一 
1280)px xX (600 一 800)px。 
在 平板 计算 机 上 以 标准 格式 浏览 大 部 分 网 站 都 很 轻松 ， 因 为 其 浏览 器 使 用 起 来 就 像 在 计算 机 显示 器 上 
使 用 一 样 清晰 简单 。 另 外 ，iOS 及 Android 系统 中 都 有 的 缩放 功能 可 轻易 将 难以 阅读 的 微小 区 域 放 大 。 


.7.2 移动 用 户 需 要 的 内 容 


在 为 移动 设备 设计 网 站 时 , 需要 记 住 用 户 不 希望 其 浏览 到 的 内 容 与 在 合式 计算 机 上 浏览 到 的 内 容 是 一 样 的 。 

例如 ， 移 动用 户 所 在 的 位 置 经 常 发 生变 化 ， 也 就 是 说 ， 他 们 通常 在 外 走动 ， 不 是 固定 待 在 某 个 地 方 ， 
在 访问 网 站 时 通常 带 有 特定 目标 。 例 如 ， 一 个 在 车 里 用 手机 访问 餐厅 网 站 的 用 户 通常 需要 很 快 找到 餐厅 的 
地 址 及 电话 号 码 ， 若 该 移动 网 站 没有 在 醒目 的 地 方 标 出 地 址 及 电话 号 码 ， 用 户 就 会 很 快 结束 这 次 访问 。 
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移动 网 站 的 内 容 不 能 受到 限制 。 事 实 上 ，W3C 建议 ,“ 无 论 用 户 使 用 的 是 哪 种 设备 ， 都 应 为 他 们 提供 
同样 的 ， 尽 可 能 多 的 合理 信息 及 服务 ”。 
另外 ， 移 动 网 站 经 常 爱 犯 的 错误 是 在 网 站 的 移动 版 本 上 删 减 内 容 ， 尽 管 为 移动 用 户 调整 内 容 结构 ， 让 
他 们 能 尽快 找到 重要 信息 是 必要 的 ， 但 车 用 户 需要 的 内 容 并 不 在 移动 网 站 上 ， 就 应 该 让 他 们 能 够 浏览 网 站 
的 完整 版 本 。 
这 并 不 是 说 设计 人 员 不 需要 对 他 们 的 内 容 格式 或 位 置 进 行 调整 ， 而 是 应 当 让 移动 用 户 有 机 会 和 人 台式 机 
户 一 样 接触 到 同样 的 内 容 。 


1.7.3 ”使 用 的 HTML、CSS 及 JavaScript 是 否 有 效 且 简洁 


在 为 移动 设备 编写 网 页 代码 时 ， 并 不 需要 特意 为 其 编写 结构 良好 的 代码 ， 但 是 需要 坚持 使 用 正确 、 标 “ 
准 格式 的 HTML、CSS 以 及 JavaScript， 能 让 页 面 在 大 部 分 设备 中 适用 。 另 外 ， 还 可 以 通过 HTML 的 有 效 
验证 来 确认 它 是 否 正确 、 是 否 够 简洁 。 

使 用 W3C 验证 器 可 以 帮助 用 户 检查 HTML、CSS 以 及 JavaScript 是 否 有 效 且 简洁 ， 该 验证 器 位 于 
http://validator.w3.org。 除 此 之 外 ， 它 还 可 以 验证 RSS， 甚 至 是 页 面 上 的 无 效 链接 。 用 户 可 以 定期 在 这 个 验 
证 器 上 检查 网 站 ， 如 图 1-51 所 示 。 


















































x 
|[ 国 -|W hrpyvalidatorw3org/ DP © |W The W3C Mareup Validat x 个 ® 
文件 们 篇)】 吉 看 WV】 收 大 入 工具 MT) 项 向 H) 


Markup Validation Service 


Validate by URI Validato by File Upload Validato by DirectInput 





~ 


Validate by URI 
Validate a document online: 





Address 


» More Options 





Check 


This validator checks the markup validity of Web documents in HTML, XHTML SMIL, MathML, etc If you wish to validate 
specific content such as RSS/Atom feeds or CSS stylesheets. MobileOK content. or to find broken links, there are other 
Yalidators and tools available. As an alternative you can also ty our non-DTD-based validator 


The W3C validators are developed with assistance from the Mozila Foundetion, and supported cy 
by community donations 
mozilla Donato and help us build better tools for a better wob. 四 


1-51 W3C 验证 器 


另外 ， 除 了 编写 有 效 的 HTML 代码 外 ， 在 为 移动 设备 编写 Web 页 面 时 应 注意 避免 以 下 情况 。 

。 HTML 表格 一 一 由 于 移动 设备 的 屏幕 尺寸 很 小 ， 使 用 水 平 滚动 相对 困难 ， 从 而 导致 表格 难以 阅读 ， 

因此 ， 需 要 尽量 避免 在 移动 布局 中 使 用 表格 。 

。 HTML 表格 布局 一 一 通常 来 说 ， 在 Web 页 面 布局 中 ， 不 应 使 用 HIML 表格 ， 而 且 在 移动 设备 中 ， 
这 些 表格 会 让 页 面 加 载 速度 变 慢 ， 并 影响 美观 ， 尤 其 是 在 它 与 浏览 器 窗口 不 匹配 时 。 另 外 ， 在 页 面 
布局 中 通常 使 用 的 是 嵌 套 表格 ， 这 类 表格 会 让 页 面 加 载 速度 更 慢 ， 并 且 让 演 染 过 程 变 得 更 困难 。 

。 弹出 窗口 一 一 通常 来 讲 ， 弹 出 窗口 很 让 人 厌烦 ， 而 在 移动 设备 上 它们 甚至 能 让 网 站 变 得 不 可 用 ， 有 
些 移动 浏览 器 并 不 支持 弹出 窗口 ， 还 有 一 些 浏览 器 则 总 是 以 意料 之 外 的 方式 打开 它们 ， 通 常会 关闭 
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原 窗口 ， 然 后 打开 新 窗 

. 图 片 布局 与 在 页 面 布局 中 使 用 表格 类 似 ， 加 入 隐藏 图 像 以 增加 空间 及 影响 布局 的 方法 经 常会 
一 些 老 的 移动 设备 死机 或 无 法 正确 显示 页 面 。 另 外 ， 它 们 还 会 延长 下 载 时 间 。 

。 框架 及 图 像 地 图 一 一 许多 移动 设备 都 无 法 支持 此 类 HTML 特性 。 事 实 上 ， 从 实用 性 来 讲 ,，HTML 5 
的 规范 中 已 经 丢弃 了 框架 ， 但 这 ame 除外 。 

另外 ， 需 要 考虑 的 是 ， 移 动用 户 在 访问 网 页 时 是 需要 为 流量 付费 的 ， 因 此 Web 页 面 应 尽 可 能 的 小 ， 使 

的 HTML 标签 、CSS 属性 和 服务 器 请 求 越 少 ， 网 站 就 会 越 受 欢迎 。 

提示 : 尽管 需要 尽量 避免 表格 、 弹 出 窗口 及 图 像 地 图 ， 但 iOS 和 Android 上 的 移动 页 面 还 是 能 够 很 好 

地 处 理 它们 。 但 它们 无 法 处 理 框架 ， 因 为 框架 并 不 是 HTML 5 的 一 部 分 。 


1.7.4 是 否 使 用 独立 域名 


许多 网 站 的 移动 版 本 都 有 一 个 独立 的 域名 ， 因 此 移动 用 户 可 以 绕 过 常规 网 站 直接 访问 其 移动 版 。 此 类 
域名 通常 为 m.exampe.com。 

总 体 而 言 ， 为 移动 网 站 设置 独立 域名 的 好 处 有 以 下 几 点 。 

。 让 用 户 更 容易 找到 该 移动 网 站 。 

。 可 以 为 移动 网 站 的 URL 进行 独立 宣传 ， 制 造 更 多 访问 量 。 
。 使 用 平板 计算 机 或 智能 手机 的 用 户 通过 更 改 域名 便 可 以 访问 常规 网 站 。 
。 与 使 用 脚本 为 移动 用 户 更 改 CSS 样式 相 比 ， 将 移动 用 户 检测 出 来 并 导向 独立 域名 这 一 方法 更 为 
轻松 。 


1.7.5 ”网 站 需要 通过 怎样 的 测试 


户 应 当 在 尽 可 能 多 的 移动 设备 上 进行 网 站 测试 。 尽 管 开 发 人 员 可 以 使 用 不 同 浏览 器 或 模拟 不 同 的 屏 
幕 尺 寸 来 测试 ， 但 若 不 直接 在 移动 设备 上 进行 测试 ， 仍 有 可 能 出 现 以 下 情况 。 

。 移动 运营 商 的 数据 包 大 小 限制 使 得 移动 设备 无 法 加 载 页 面 或 图 像 。 
无 法 正确 加 载 图 像 ， 或 完全 无 法 加 载 图 像 。 
无 法 水 平 滚动 〈 在 某 些 手机 上 几乎 完全 无 法 做 到 )。 
需要 特定 设备 的 功能 ， 否 则 无 法 正确 工作 。 
不 支持 问 价格 式 。 
使 用 模拟 器 一 一 许多 移动 设备 都 有 在 线 或 离线 模拟 器 ， 其 中 大 部 分 是 免费 的 ， 可 以 通过 它们 进行 一 
些 基础 测试 。 
。 租用 设备 一 一 可 以 租用 不 同 手机 来 测试 应 用 在 手机 上 的 表现 
。 购买 一 些 手机 一 一 这 是 比较 昂贵 的 选择 ， 但 对 致力 于 在 移动 Web 开发 上 做 出 成 绩 的 人 来 说 ， 这 是 一 项 
a 






































































































































这 种 做 法 需要 向 身边 的 人 借用 手机 或 








平板 计算 机 ， 然后 将 网 站 放 在 在 线 Web 服务 器 上 进行 测试。 
最 后 ， 若 想 要 进行 移动 开发 ， 至 少 需要 拥有 一 部 移动 设备 来 直接 测试 页 面 ， 在 越 多 的 设备 上 进行 测试 ， 
网 站 就 会 变 得 越 好 。 
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1.8 测试 工具 


在 移动 应 用 开发 过 程 中 ,测试 是 至 关 重 要 的 一 个 环节 , 拥有 好 的 测试 工具 不 仅 能 实现 事半功倍 的 效果 ， 
还 能 极 大 地 降低 开发 者 所 需 花费 的 时 间 和 精力 。 本 节 就 来 介绍 一 些 测试 工具 。 


1.8.1 仿真 器 与 模拟 器 


















































仿真 器 (Emulator)， 又 称 仿真 程序 ， 在 软件 工程 中 指 可 以 使 计算 机 或 者 其 他 多 媒体 平台 (如 掌上 计算 














机 、 手 机 ) 运行 其 他 平台 上 的 程序 。 仿 真 器 一 般 需 要 ROM 才能 执行 , ROM 的 最 初 来 源 是 一 些 平台 的 ROM 
芯片 ， 通 过 一 些 手 段 将 原 程序 拷贝 下 来 (这 个 过 程 一 般 称 之 为 dump)， 然 后 利用 仿真 器 加 载 这 些 ROM 来 
实现 仿真 过 程 。 如 图 1-52 所 示 为 Genymotion 仿真 器 ， 它 是 基于 VirtualBox 仿真 器 的 。 

在 没有 设备 的 情况 下 ， 最 简单 有 效 的 测试 工具 就 是 模拟 器 。 最 好 的 模拟 器 是 可 以 在 桌面 计算 机 上 运行 
的 模拟 器 。 下 面 介 绍 几 种 常用 的 模拟 器 。 


1. Android SDK 模拟 器 
为 开发 者 提供 了 Android 应 用 测试 、 构 建 及 调试 所 必 备 的 API 库 和 工具 。 该 模拟 器 能 够 帮助 开发 者 极 






















































































大 地 提高 开发 效率 ， 无 论 是 开发 还 是 调试 ， 均 可 以 快速 完成 ， 如 图 1-53 所 示 为 Android SDK 模拟 器 界面 。 





1-52 Genymotion 仿真 器 图 1-53 Android SDK 模拟 器 界面 


2. BlackBerry 模拟 器 

使 用 BlackBerry 模拟 器 ， 开 发 者 不 仅 可 以 直接 在 PC 上 查看 、 测 试 并 调试 BlackBerry 应 用 ， 还 可 以 对 
屏幕 、 键 盘 、 触 控 板 等 能 否 完美 配合 应 用 程序 进行 测试 ， 如 图 1-54 所 示 为 BlackBerry 模拟 器 界面 。 借 助 
BlackBerry 模拟 器 ， 运 行 和 调试 应 用 程序 ， 就 如 同 在 真实 的 BlackBerry 设备 上 一 样 。 

3. iPhoney 模拟 器 

iPhoney 是 一 款 专门 用 于 iPhone Web 应 用 测试 的 模拟 器 ， 可 以 为 开发 者 提供 一 个 与 Phone 实际 大 小 相 
同 的 Web 浏览 环境 ， 支 持 Safari， 能 够 让 开发 者 对 应 用 设计 进行 完整 的 视觉 质量 测试 。 
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1-54 ”BlackBerry 模拟 器 界面 


: 1.8.2 在线 测试 模拟 器 


在 线 模拟 器 的 效果 比 不 上 桌面 模拟 器 ， 因 为 它们 功能 更 少 ， 不 过 使 用 起 来 很 方便 ， 常 用 的 在 线 测试 模 
拟 器 有 以 下 几 种 。 


1. dotMobi 模拟 器 
能 够 允许 开发 者 对 某 一 特定 的 网 站 能 否 良好 地 适 配 移动 Web 浏览 器 进行 测试 ， 并 且 ， 还 拥有 一 个 从 主 
页 寻求 额外 支持 的 功能 。 


2.iPad Peek 模拟 器 

在 线 测 试 网 站 iPad Peek 在 iOS 开发 者 中 口碑 颇 高 , 其 能 够 直接 在 线 模拟 测试 网 站 兼容 性 的 功能 也 十 分 
强大 。 支 持 横 竖 屏 预览 ， 无 论 是 iPad 还 是 iPhone， 开 发 者 只 需 登 录 iPad Peek 网 站 ， 在 其 首页 对 话 框 中 输 
入 需要 查看 的 域名 地 址 ， 即 可 进行 完美 测试 。 此 外 ，iPad Peek 还 支持 本 地 预览 。 


1.8.3 ”软件 自动 化 测试 


如 今 自动 化 测试 已 经 广泛 应 用 于 各 种 移动 设备 的 测试 中 ， 这 是 因为 自动 化 测试 在 测试 过 程 中 节约 了 时 
间 ， 还 能 避免 包括 人 为 因素 造成 的 测试 错误 和 和 遗漏。 自动 化 测试 工具 有 很 多 ， 一 些 是 开源 的 ， 还 有 一 些 则 
价格 昂贵 。 因 此 ， 在 众多 的 可 供 选 择 的 自动 化 测试 工具 中 ， 要 选 到 合适 的 是 比较 困难 的 。 

目前 ， 大 多 数 个 人 计算 机 的 操作 系统 是 Windows， 而 流行 的 移动 操作 系统 是 Android、 苹 果 iOS、 黑 莓 
OS、Windows 手机 、Symbian 和 其 他 。 下 面 介绍 几 款 常 用 的 自动 化 测试 工具 。 

















































































































1. Robotium 
Robotium 是 一 款 国外 的 Android 自动 化 测试 框架 , 主要 
针对 Android 平台 的 应 用 进行 黑 盒 自动 化 测试 ， 它 提供 了 模 
拟 各 种 手势 操作 (点击 、 长 按 、 滑 动 等 )、 查 找 和 断言 机 制 . 
的 API， 能够 对 各 种 控件 进行 操作 ( 见 图 1-55)。Robotium 结 从 Roboti um 
合 Android 官方 提供 的 测试 框架 达到 对 应 用 程序 进行 自动 
化 测试 的 目的 。 图 1-55 ”Robotium 测试 工具 
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2. Monkeyrunner 

Monkeyrunner 是 一 款 流行 的 Android 测试 工具 ， 自动 化 功能 测试 ， 如 图 1-56 所 示 。Monkeyrunner 
可 以 连接 到 计算 机 或 模拟 真实 设备 运行 测试 。 该 工具 有 一 个 接口 ， 用 它 来 控制 智能 手机 、 平 板 计算 机 或 外 
部 模拟 器 的 Android 代码 。 

这 个 测试 工具 的 缺点 是 ， 它 必须 为 每 个 设备 编写 脚本 。 另 一 个 问题 是 ， 每 次 测试 程序 的 用 户 界面 发 生 
变化 都 需要 调整 测试 脚本 。 



















































































1-56 ” Monkeyrunner 测试 工具 


1.9 ”就业 面试 技巧 与 解析 


1.9.1 ”面试 技巧 与 解析 (一) 


面试 官 : 我 们 公司 已 经 拥有 一 个 门户 网 站 了 ， 现 在 想 让 移动 用 户 也 能 够 使 用 它 ， 请 问 你 是 如 何 确认 这 
个 网 站 是 否 提供 了 移动 用 户 需要 的 功能 的 ? 

应 聘 者 : 最 好 的 做 法 是 直接 咨询 用 户 的 意见 ， 可 以 通过 调查 用 户 访问 网 站 的 途径 以 及 对 网 站 哪 部 分 最 
感 兴 趣 来 得 知 用 户 需 求 。 另外 , 也 可 以 使 用 Web 数据 统计 , 若 网 站 上 没有 相关 数据 分 析 器 , 建议 安装 Google 
Analytics 或 者 Piwik 等 数据 分 析 器 来 追踪 用 户 在 网 站 上 的 行为 ， 在 找 出 受 欢 迎 的 页 面 后 ， 就 可 以 确保 移动 
用 户 也 能 很 容易 地 访问 这 些 页 面 。 

也 可 以 使 用 Web 数据 分 析 器 来 统计 访问 网 站 的 浏览 器 类 型 (Firefox、IE、Chrome 等 )， 以 及 用 户 如 何 
使 用 网 站 〈 用 户 单 击 的 页 面 以 及 离开 的 页 面 等 )。 通 过 这 种 方法 ， 即 便 没 有 获得 直接 的 用 户 反 馈 ， 也 可 以 根 
据 用 户 当 前 的 浏览 习惯 来 调整 网 站 。 


1.9.2 面试 技巧 与 解析 〈 二 ) 
面试 官 : 除了 使 用 内 容 管 理 系统 来 维护 移动 站 点 外 ， 不 知道 你 有 什么 推荐 ? 


应 聘 者 : 对 于 我 个 人 来 说 ， 我 通常 使 用 带 有 WordPress Mobile Pack 的 WordPress 来 维护 移动 网 站 及 常 
规 网 站 。 
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第 2 章 
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~ 


“7 学 习 指引 


HTML 5 作为 最 新 的 标记 语言 ， 它 与 旧版 本 的 HTML 标记 语言 相 比 变化 很 大 ， 在 未 来 的 网 站 开发 与 移 
动 Web 开发 中 ， 它 将 作为 最 常用 的 标记 语言 。 除 此 之 外 ，HTML 5 的 许多 新 功能 还 使 其 增加 了 更 多 的 适用 
范围 ， 所 以 在 使 用 之 前 需要 真正 认识 HTML 5。 


”重点 导读 


。 热 悉 HTML 5 的 语法 结构 。 
“掌握 HTML 5 的 新 技术 改进 。 
。， 了 和 解 HTML 5 给 移动 Web 开发 带 来 的 优势 。 


2.1 HTML 5 的 语法 结构 


HTML 5 不 是 一 种 编程 语言 ， 而 是 一 种 描述 性 的 标记 语言 ， 用 于 描述 超 文 本 中 的 内 容 和 结构 。HTML 5 
最 基本 的 语法 是 < 标记 符 ></ 标 记 符 >。 标 记 符 通常 都 是 成 对 使 用 ， 有 一 个 开头 标记 和 一 个 结束 标记 。 结 束 标 
记 只 是 在 开头 标记 的 前 面 加 一 个 斜 枉 “/”。 当 浏览 器 收 到 HTML 5 文件 后 ， 就 会 解释 里 面 的 标记 符 ， 然 后 
把 标记 符 相 对 应 的 功能 表达 出 来 。 

如 在 HIML 5 中 用 <p></p> 标 记 符 来 定义 一 个 段落 ， 用 <br> 来 定义 一 个 换行 符 。 当 浏览 器 遇 到 <p></p> 
标记 符 时 ， 会 把 该 标记 中 的 内 容 自 动 形成 一 个 段落 。 当 遇 到 <br> 标 记 符 时 ， 会 自动 换行 ， 并 且 该 标记 符 后 
的 内 容 会 从 一 个 新 行 开始 。 这 里 的 <br> 标 记 符 是 单 标 记 ， 没 有 结束 标记 ， 标 记 后 的 “/” 符 号 可 以 省 略 ， 为 
了 规范 代码 ， 一 般 建 议 加 上 。 

一 个 完整 的 HTML 5 文件 包括 文档 类 型 说 明 、 标 题 、 段 落 、 列 表 、 表 格 、 绘 制 的 图 形 及 各 种 嵌入 对 象 ， 
这 些 对 象 统称 为 HTML 元 素 。HTML 5 文件 的 语法 结构 如 下 : 

<!1DOCTYPE html> 文 档 类 型 说 明 


<html > 文件 开始 的 标记 
<head> 文 档 头 部 开始 的 标记 
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文件 头 的 内 容 

</head> 文 档 头 部 结束 的 标记 

<body> 文 件 主体 开始 的 标记 

文档 主体 内 容 

</body> 文 件 主体 结束 的 标记 

</html> 文 件 结束 的 标记 

从 上 面 的 代码 可 以 看 出 ,在 HTML 5 文件 中 ， 所 有 的 标记 都 是 相对 应 的 ， 开 头 标记 为 < >， 结 束 标记 为 
</>， 在 这 两 个 标记 中 间 添 加 内 容 。 


2.1.1 文档 类 型 说 明 


HTML 5 设计 准则 中 的 第 3 条 一 一 化 繁 为 简 , 使 得 Web 页 面 的 文档 类 型 说 明 (DOCTYPE) 被 极 大 地 简 
化 了 。 细心 的 读者 会 发 现 , 在 使 用 Dreamweaver CS 6 创建 的 HTML 文档 时 , 文档 头 部 的 类 型 说 明代 码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0org/TR/xhtmll1/ 
DTD/xhtmll-transitional.dtd"> 


上 面 为 XHTML 文档 类 型 说 明 ， 读 者 可 以 看 到 这 段 代码 既 麻 烦 又 难 记 ，HTML 5 对 文档 类 型 进行 了 简 
化 ， 简 单 到 15 个 字符 就 可 以 了 ， 代 码 如 下 : 
<!DOCTYPE html> 


注意 : doctype 的 申明 需要 出 现在 html 文件 的 第 一 行 。 
2.1.2 HTML 标记 


日 汪汪 得 
HTML 标记 代表 文档 的 开始 ， 由 于 HTML 语言 语法 的 松散 特性 ， 该 标记 可 以 省 略 ， 但 是 为 了 使 之 符合 

Web 标准 和 文档 的 完整 性 ， 养 成 良好 的 编写 习惯 ， 建 议 不 要 省 略 该 标记 。 
HTML 标记 以 <html> 开 头 , 以 </html> 结 尾 , 文档 的 所 有 内 容 书写 在 开头 和 结尾 的 中 间 部 分 , 语法 格式 如 下 : 


<html> 






































</html> 


2.1.3 头 标记 head 


头 标记 head 用 于 说 明文 档 头 部 相关 信息 ， 一 般 包括 标题 信息 、 元 信息 、 定 义 CSS 样式 和 脚本 代码 等 。 
HTML 的 头 部 信息 是 以 <head> 开 始 ， 以 </head> 结 束 ， 语 法 格式 如 下 : 


<head> 








nent 
说 明 : <head> 元 素 的 作用 范围 是 整 篇 文档 , 定义 在 HIML 语言 头 部 的 内 容 往往 不 会 在 网 页 上 直接 显示 。 
在 head 标记 中 一 般 可 以 设置 title 和 meta 等 标记 的 内 容 。 


2.1.4 ”标题 标记 title 
HTML 页 面 的 标题 一 般 用 来 说 明 页 面 的 用 途 ， 它 显示 在 浏览 器 的 标题 栏 中 。 在 HTML 文档 中 ， 标 题 信 


息 设置 在 <head> 与 </head> 之 间 。 标 题 标记 以 <title> 开 始 ， 以 </tile> 结 束 ， 语 法 格式 如 下 : 


<title> 





</title> 
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ND 


标记 中 间 的 “ : ”就 是 标题 的 内 容 ， 它 可 以 帮助 用 户 更 好 地 











识别 页 面 。 预 览 网 页 时 ， 设 置 的 标题 在 浏览 器 的 左上 方 标题 栏 中 画 GWusersqiengwpeecP 
显示 ， 如 图 2-1 所 示 。 文件 月 ” 奖 吉 二 看 V) 收 B 夫 (A) 工具 帮 (H) 











此 外 ， 在 Windows 任务 栏 中 显示 的 也 是 这 个 标题 ， 页 面 的 
标题 只 有 一 个 ,它们 位 于 HTML 文档 的 头 部 , 即 <head> 和 </head> 
之 间 。 


2.1.5 元 信息 标记 meta 


<meta> 元 素 可 提供 有 关 页 面 的 元 信息 (meta-information)， 比 如 针对 搜索 引擎 和 更 新 频 度 的 描述 及 关键 
词 。<meta> 标 签 位 于 文档 的 头 部 ， 不 包含 任何 内 容 。<meta> 标 签 的 属性 定义 了 与 文档 相关 联 的 名 称 / 值 对 ， 
如 表 2-1 所 示 为 <meta> 标 签 提供 的 属性 及 取 值 。 


表 2-1 <meta> 标 签 提供 的 属性 及 取 值 











2-1 标题 标记 


属 性 
charset character encoding 定义 文档 的 字符 编码 
content some text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 
content-type 
expires 
nd refresh 
Set-cookie 
author 
description 
keywords 
generator 
revised 
others, 


1. 字符 集 charset 属性 

在 HTML 5 中 ， 有 一 个 新 的 charset 属性 ， 它 使 字符 集 的 定义 更 加 容易 。 例 如 ， 下 列 代码 告诉 浏览 器 ， 
网 页 使 用 ISO-8859-1 字符 集 显 示 : 

<meta charset="ISO-8859-1"> 

2. 搜索 引擎 的 关键 词 

在 早期 , Meta Keywords 关键 词 对 搜索 引擎 的 排名 算法 起 到 了 一 定 的 作用 , 也 是 很 多 人 进行 网 页 优化 的 
基础 。 关 键 词 在 浏览 时 是 看 不 到 的 ， 使 用 格式 如 下 : 

<meta name="keywords"” content=" 关 键 字 , keywords" /> 

说 明 : 

(1) 不 同 的 关键 词 之 间 ， 应 用 半角 过 号 隔 开 ( 英文 输入 状态 下 ) ， 不 要 使 用 “空格 ”或 “|” 间 隔 ; 

(2) 是 keywords， 不 是 keyword; 

(3 ) 关键 词 标 签 中 的 内 容 应 该 是 一 个 个 的 短语 ， 而 不 是 一 段 话 。 

例如 ， 定 义 针对 搜索 引擎 的 关键 词 ， 代 码 如 下 : 


<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> 


把 content 属性 关联 到 HTTP 头 部 


把 content 属性 关联 到 一 个 名 称 


name 
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关键 词 标签 Keywords， 曾 经 是 搜索 引擎 排名 中 很 重要 的 因素 ， 但 现在 已 经 被 很 多 搜索 引擎 完全 忽略 。 
如 果 我 们 加 上 这 个 标签 ， 对 网 页 的 综合 表现 没有 坏处 但是， 如 果 使 用 不 当 ， 那 么 对 网 页 非但 没有 好 处 ， 
还 有 欺诈 的 嫌疑 。 因 此 ， 在 使 用 关键 词 标签 Keywords 时 ， 要 注意 以 下 几 点 : 

(1) 关键 词 标签 中 的 内 容 要 与 网 页 核心 内 容 相关 ， 确 信使 用 的 关键 词 出 现在 网 页 文本 中 。 

(2) 使 用 用 户 易于 通过 搜索 引擎 检索 的 关键 词 ， 过 于 生僻 的 词汇 不 太 适 合 做 META 标签 中 的 关键 词 。 

(3) 不 要 重复 使 用 关键 词 ， 否 则 可 能 会 被 搜索 引擎 惩罚 。 

(4) 一 个 网 页 的 关键 词 标 签 里 最 多 包含 3 一 $ 个 最 重要 的 关键 词 ， 不 要 超过 5 个 。 

(5) 每 个 网 页 的 关键 词 应 该 不 一 样 。 

注意 : 由 于 设计 者 或 SEO 优化 者 以 前 对 Meta Keywords 关键 词 的 滥用 ， 导 致 目前 它 在 搜索 引擎 排名 中 
的 作用 很 小 。 

3. 页 面 描述 

Meta Description 是 一 种 HTML 元 标签 ， 用 来 简略 描述 网 页 的 主要 内 容 , 通常 被 搜索 引擎 用 在 搜索 结 
页 上 展示 给 最 终 用 户 看 的 文字 片段 。 页 面 描述 在 网 页 中 是 不 显示 出 来 的 ， 页 面 描述 的 使 用 格式 如 下 : 

<meta name="description”content=" 网 页 的 介绍 ”/> 

例如 ， 定 义 对 页 面 的 描述 ， 代 码 如 下 : 

<meta name="description"” content=" 专 业 的 技术 教程 ”/> 

4. 页 面 定时 跳 转 

使 用 <meta> 标 记 可 以 使 网 页 经 过 一 定时 间 后 自动 刷新 ， 这 可 通过 将 http-equiv 属性 值 设置 为 refiesh 来 实 
现 。Content 属性 值 可 以 设置 为 更 新 时 间 。 

在 浏览 网 页 时 经 常会 看 到 一 些 欢迎 信息 的 页 面 ， 在 经 过 一 段 时 间 后 ， 这 些 页 面 会 自动 转 到 其 他 页 

这 就 是 网 页 的 跳 转 。 页 面 定时 刷新 跳 转 的 语法 格式 如 下 : 

<meta http-equiv="refresh"” content=" 秒 ; [url= 网 址 ]” /> 

说 明 : 上 面 的 [url= 网 址 ] 部 分 是 可 选项 ， 如 果 有 这 部 分 ， 页 面 定时 刷新 并 跳 转 ， 如 果 省 略 该 部 分 ， 页 面 
只 定时 刷新 ， 不 进行 跳 转 。 

例如 ， 实 现 每 10s 刷新 一 次 页 面 。 将 下 述 代码 放 入 head 标记 部 分 即 可 。 


<meta http-equiv="refresh" content="10" /> 


2.1.6 网 页 的 主体 标记 


网 页 所 要 显示 的 内 容 都 放 在 网 页 的 主体 标记 内 , 它 是 HTML 文件 的 重点 所 在 。 在 后 面 章节 所 介绍 的 HTML 
标记 都 将 放 在 这 个 标记 内 。 然 而 它 并 不 仅仅 是 一 个 形式 上 的 标记 ， 它 本 身 也 可 以 控制 网 页 的 背景 颜色 或 背 
景 图 像 ， 这 将 在 后 面 进行 介绍 。 主 体 标记 是 以 <body> 开 始 ， 以 </body> 标 记 结束 ， 语 法 格式 如 下 : 


<body> 































































































可 


























es 

注意 ， 在 构建 HTML 结构 时 ， 标 记 不 允许 交错 出 现 ， 否 则 会 造成 错误 。 
例如 ， 在 下 列 代码 中 ，<body> 开 始 标 记 出 现在 <head> 标 记 内 。 

<html> 

<head> 

<title>html 标记 </title> 


<body> 
</head> 
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</body> 
</html> 


代码 中 的 第 4 行 <body> 开 始 标记 和 第 5 行 的 </head> 结 束 标记 出 现 了 交叉 ， 这 是 错误 的 。HTML 5 中 的 











所 有 代码 都 是 不 允许 交叉 出 现 的 。 


加 
a 2.1 





-7 页面 注 释 标 记 <!-- --> 
注释 是 在 HTML 5 代码 中 插入 的 描述 性 文本 ， 用 来 解释 该 代码 或 提示 其 他 信息 。 注 释 只 出 现在 代码 中 ， 


























浏览 器 对 注释 代码 不 进行 解释 ， 并 且 在 浏览 器 的 页 面 中 不 显示 。 在 HTML 5 源 代码 中 适当 地 插入 注释 语句 
是 一 种 非常 好 的 习惯 。 对 于 设计 者 日 后 的 代码 修改 、 维 护 工作 很 有 好 处 。 另 外 ， 如 果 将 代码 交 给 其 他 设计 


者 ， 








其 也 能 很 快 读 懂 前 者 所 撰写 的 内 容 。 语 法 格式 如 下 : 
<!-- 注 释 的 内 容 --> 
注释 语句 元 素 由 前 半 部 分 和 后 半 部 分 组 成 ， 前 半 部 分 一 个 左 尖 括号 、 一 个 半角 感叹 号 和 两 个 连 字符 ， 








后 半 部 分 由 两 个 连 字 符 和 一 个 右 尖 括 号 组 成 。 具 体 代码 实例 如 下 : 




















<html> 

<head> 

<title>html 标记 </title> 
</head> 

<body> 

<!-- 这 里 是 标题 --> 
<hl>HTML 5 标记 测试 </h1> 
</body> 

</html> 


页 面 注释 不 但 可 以 对 HTML 5 中 一 行 或 多 行 代码 进行 解释 说 明 , 而 且 可 能 注释 掉 这 些 代码 。 如 果 希 望 


某 些 HTML 5 代码 在 浏览 器 中 不 显示 ， 那 么 可 以 将 这 部 分 内 容 放 在 <!-- 和 --> 之 间 。 例 如 ， 修 改 上 述 代码 ， 
语法 格式 如 下 : 





030 


<html> 

<head> 

<title>html 标记 </title> 
</head> 

<body> 

ee 

<hl>HTML 5 标记 测试 </h1> 
一 -> 

</body> 

</html> 


修改 后 的 代码 ， 将 <h1> 标 记 作 为 注释 内 容 处 理 ， 在 浏览 器 中 将 不 会 显示 这 部 分 内 容 。 


2.2 HTML 5 的 新 技术 改进 
HTML 5 在 新 技术 方面 做 了 很 大 的 改进 ， 下 面 就 来 进行 具体 介绍 。 


新 增多 个 元 素 


自 1999 年 以 后 HTML 4.01 已 经 改变 了 很 多 , 为 了 更 好 地 处 理 今天 的 互联 网 应 用 , HTML 5 添加 了 很 多 
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新 元 素 及 功能 ， 比 如 ， 图 形 的 绘制 、 多 媒体 内 容 、 更 好 的 页 面 结 构 、 更 好 的 形式 处 理 、 移 动 定位 、 网 页 应 
程序 缓存 、 存 储 等 。 


2.2.2 新 增多 条 属性 
HTML 5 为 不 同 的 元 素 增加 了 许多 有 用 的 属性 , 这 让 网 站 制作 开发 变 得 更 加 简单 。 下 面 就 来 进行 具体 


介绍 。 


























1. 新 增 与 链接 相关 的 属性 

(1) 为 a 与 area 元 素 增加 media 属性 。 该 属性 有 效 的 前 提 是 href 属性 必须 存在 。media 属性 定义 了 目 
标 URL 是 针对 哪 种 类 型 的 媒介 设备 进行 优化 的 。 

(2) 为 area 元 素 增加 hreflang 属性 与 rel 属性 。 这 可 以 使 其 保持 与 a 和 link 元 素 的 一 致 性 。 

(3) 为 link 元 素 增加 sizes 属性 。 该 属性 可 以 指定 关联 图 标 〈icon) 的 大 小 ， 所 以 通常 与 icon 元 素 一 














起 使 





(4) 为 base 元 素 增加 traget 属性 ， 仍 然 是 为 了 与 a 元 素 保持 一 致 。 


2. 新 增 与 表单 相关 的 属性 


(1) 为 input (type=text)、button、select 和 textarea 元 素 增 加 autofocus 属性 。 该 属性 表示 在 打开 页 面 时 
使 元 素 自 动 获得 焦点 。 

(2) 为 input (type=text) 和 textarea 元 素 增加 placeholder 属性 。 该 属性 可 以 在 用 户 输入 时 进行 提示 。 

(3) 为 input、output、button、select、textarea 和 fieldset 增加 form 属性 。 该 属性 用 于 声明 元 素 属 于 哪 
个 表单 ， 而 并 不 关心 元 素 具体 在 页 面 的 哪个 位 置 ， 甚 至 是 表单 之 外 都 可 以 。 

(4) 为 input (type=text) 和 textarea 元 素 增加 required 属性 。 该 属性 表示 元 素 为 必 填 项 ， 当 用 户 提交 表 
单 时 系统 会 自动 检查 元 素 中 是 否 有 内 容 。 

(5) 为 input 元 素 增加 了 多 个 新 属性 : autocomplete、min、max、multiple、pattern 与 step。 同 时 还 新 增 
了 list 和 datalist 两 个 元 素 ， 可 以 与 input 配合 使 用 。 

(6) 为 nput 和 button 元 素 增加 了 多 个 新 属性 : formaction、formenctype、formmethod、formnovalidate 与 
formtarget。 它 们 可 以 重 载 早期 HTML 版 本 中 form 元 素 的 action、enctype、method、novalidate 和 target 属性 。 

(7) 为 nput、button 和 form 元 素 增加 novalidate 属性 。 该 属性 可 以 取消 用 户 提交 表单 时 需要 进行 的 相 
关 检 查 。 

(8) 为 fieldset 元 素 增 加 disabled 属性 。 该 属性 可 以 将 其 子 元 素 设 为 无 效 状态 。 


3. 新 增 的 其 他 属性 

(1) 为 ol 元 素 增加 reversed 属性 ， 用 于 指定 列表 倒序 显示 。 

(2) 为 meta 元 素 增加 charset 属性 ， 用 于 指定 文档 的 字符 编码 ， 实 际 上 该 属性 已 经 在 之 前 的 版 本 中 被 
广泛 应 用 了 。 

(3) 为 menu 元 素 增加 type 与 label 两 个 属性 。label 属性 用 于 为 菜单 定义 一 个 可 见 的 标注 ，type 属性 定 
义 菜单 的 3 种 显示 形式 ， 即 上 下 文 菜单 、 工 具 条 菜单 、 列 表 莱 单 。 

(4) 为 style 元 素 增加 scoped 属性 ， 用 于 规定 样式 的 作用 域 。 

(5) 为 script 元 素 增加 async 属性 ， 用 来 定义 脚本 是 否 异步 执行 。 

(6) 为 html 元 素 增加 manifest 属性 ， 在 开发 离线 Web 应 用 程序 时 ， 它 与 API 结合 使 用 ， 定 义 一 个 URL， 
在 这 个 URL 上 描述 文档 的 缓存 信息 。 
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(7) 为 这 ame 元 素 增 加 了 多 个 新 属性 ， 如 sandbox、seamless 和 srcdoc， 主 要 用 来 提升 页 面 安全 性 ， 防 
止 不 被 信任 的 Web 页 面 执行 某 些 操作 。 























汤 2.2.3 Video 和 Audio 


人 
HTML 5 中 的 Video 和 Audio 是 HTML 5 中 专门 用 来 播放 视频 和 音频 资源 的 标签 。Video 标签 和 Audio 


标签 也 提供 了 很 实用 的 JavaScript API， 人 允许 创建 自 定 义 的 控件 。 
Video 标签 默认 为 一 个 300 xX 150 的 inline-block。Audio 标签 默认 为 一 个 300 X30 并 且 Display 为 None 的 
Inline-block〈 除 非 有 Controls 属性 )。 但 手机 iOS 系统 中 的 Safari 浏览 器 不 支持 这 个 标签 ， 其 余 的 都 支持 。 


a 2.2.4 2D/3D 制图 特性 


HTML 5 新 增 了 <canvas></canvas> 标 签 ， 该 标签 像 所 有 的 DOM 
对 象 一 样 具 有 自己 本 身 的 属性 、 方 法 和 事件 ， 其 中 就 有 制图 的 方法 ， 
结合 JavaScript， 就 可 以 调用 它 来 绘制 图 形 ， 如 正方 形 、 长 方形 、 
形 和 贝 塞 尔 曲 线 等 , 如 图 2-2 所 示 为 使 用 <canvas></canvas> 标 签 绘制 
的 贝 济 埃 曲 线 。 
回 2-2” 贝 济 埃 曲线 
2.2.5 ”浏览 器 支持 特性 


目前 ,几乎 所 有 的 主流 浏览 器 都 能 很 好 地 支持 HTML 5 的 特性 ， 






















































































F 面 具体 介绍 几 种 支持 情况 。 ee 
(1) Chrome，Firefox: 支持 HIML 5 很 多 年 ， 而 且 有 自动 升级 ， Internet 

支持 相对 比较 好 。 ”Explorer11 
(2) Safari，Opera: 支持 HTML 5 多 年 ， 支 持 也 很 好 。 版 本 11.1480.14393.0 





(3) 下 浏览 器 : 相对 之 前 的 版 本 ， 自 正 10 起 支持 效果 比较 好 。 
在 正 浏览 器 界面 中 选择 “帮助 ”一 “关于 Intemet Explorer” 菜 单 命 
令 ， 即 可 在 打开 的 对 话 框 中 查看 浏览 器 版 本 信息 ， 如 图 2-3 所 示 。 


DFI] 


这 2.2.6 本 地 存储 特性 人 


HTML 5 Storage 提供 了 一 种 方式 让 网 站 能 够 把 信息 存储 到 你 本 地 的 计算 机 上 , 并 在 以 后 需要 的 时 候 进 
行 获取 。 这 个 概念 和 Cookie 相似 , 区 别 是 它 是 为 了 更 大 容量 存储 设计 的 。 HTML 5 提供 的 WebStorage 技术 
共有 两 个 对 象 ， 分 别 为 window.sessionStorage 和 window.localStorage。 
(1) window.sessionStorage 一 一 会 话 级 存储 。 
存储 一 个 数据 : sessionStorage['key']=value; 
/sessionStorage.setItem('key',value); 
读 取 一 个 数据 : var data = sessionStorage['key']; 
/var data = SessionStorage.getItem(key): 
获取 数据 的 个 数 : sessionStorage.length 
清除 所 有 的 数据 : sessionStorage.clear0; 


清除 一 个 数据 : sessionStorage.removeltem(key"); 





全 2015 Microsoft Corporation(M)。 保留 所 有 权利 
关 间 (O 
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(2) window.localStorage 一 一 本 地 存储 。 
存储 一 个 数据 : localStorage['key']=value; 
/localStorage.setItem(key',value): 
读 取 一 个 数据 : var data = localStorage[key']; 
/var data = localStorage.getItem(key): 
获取 数据 的 个 数 : localStorage.length 
清除 所 有 的 数据 : localStorage.clear0: 


清除 一 个 数据 : localStorage.removeItem(key); 


2.2.7 本 地 SQL 数据 


本 地 SQL 数据 是 HTML 5 新 增加 的 功能 , 这 个 功能 可 以 把 原本 要 保存 在 服务 端的 数据 转换 为 保存 在 客 
户 端 ,这样 大 大 提高 了 Web 应 用 程序 的 性 能 ， 减 轻 了 服务 器 的 负担 ， 这 其 中 就 包含 Web SQL Database 等， 
也 就 是 本 地 SQL 数据 。 























2.2.8 WebSocket 技术 


WebSocket 是 HTML 5 新 加 的 一 个 协议 , 该 协议 的 主要 作用 就 是 为 了 解决 Http 协议 的 Request、 Response 
的 一 一 对 应 和 它 自 身 的 被 动 性 ， 以 及 ajax 轮 询 等 问题 。 使 用 该 协议 可 以 发 送 多 条 信息 ， 连 接 不 中 断 ， 永 久 连 
接 。 不 过 ， 这 也 导致 了 服务 器 连接 的 客户 端 数量 有 限 。 

下 面 介绍 客户 端的 使 用 ， 具 体 代 码 如 下 : 

var ws=new WebSocket ('ws:// 地 址 :端口 号 '); // 创 建 ws 客户 端 











ws .onopen=function () { // 连 接 成 功 时 触发 
ws.send(); // 发 送信 息 
ws.onmessage=function(e){ // 获 得 信息 时 触发 
e.data; // 接 收 的 信息 


} 
} 


2.2.9 Web Worker 技术 


于 JavaScript 是 单线 程 的 ， 所 以 HTML 5 添加 了 Web Worker 的 功能 ， 它 允许 JavaScript 创建 多 个 线 
程 ， 但 是 子 线程 完全 受 主线 程控 制 ， 且 不 能 操作 DOM， 从 而 来 处 理 一 些 比较 耗 时 的 操作 。 
那么 , 如 何 创建 一 个 子 线程 呢 ? 一 般 情 况 下 需要 一 个 构造 函数 var worker = new Worker('worker.js") 来 创 
建 ， 下 面 给 出 与 Web Worker 一 起 工作 的 常用 API。 具 体 介 绍 如 下 : 

。 postMessage(): 用 来 在 主线 程 和 子 线程 间 传递 数据 。 

。 terminate0: 终止 子 线程 ， 无 法 再 调用 ， 除 非 另 外 重新 创建 。 

。 message: 消息 发 送 时 触发 ， 通 过 事件 的 data 属性 获得 传递 的 数据 。 

。 error: 当 出 错时 触发 ， 通 过 事件 的 message 属性 获得 错误 信息 。 
























































2.2.10 SVG 新 特性 


相对 于 Canvas 绘图 ，SVG 是 一 种 使 用 XML 描述 2D 图 形 的 技术 ,全 称 为 Scalable Vector Graphics， 可 
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缩放 的 矢量 图 ,在 2000 年 就 已 经 存在 , HTML 5 把 它 纳入 了 标准 标签 库 ， 并 进行 了 一 些 修改 。 需 要 注意 的 是 ， 
SVG 图 形 的 属性 不 属于 HTML DOM 标准 ,需要 用 DOM 的 方法 来 操作 ;， SVG 的 样式 可 以 用 CSS， 但 是 只 能 
其 专 有 的 属性 ， 如 果 要 使 用 JavaScript 动态 生成 SVG 中 的 元 素 ， 创 建 方法 为 document.createElementNS()。 
5 外 ，SVG 元 素 的 nodeName 都 是 纯 小 写 形式 。 


2.2.11 ”地理 地 位 特性 


地 理 地 位 特性 就 是 ,使 用 JavaScript 获取 浏览 器 当前 所 在 的 地 理 坐 标 , 实现 LBS(Location Based Service， 
基于 定位 的 服务 )。 下 面 就 是 它 的 基本 调用 代码 : 
if(navigator.geolocation){ 
navigator.geolocation.getCurrentPosition(successFn,errorFn,{ 
enableHighAccuracy:true, // 获 得 高 精度 位 置 ,默认 为 false 
timeout :5000, // 获 取 地 理 位 置 的 超时 时 间 , 默认 不 限时 
maximumAge:3000// 最 长 有 效 期 
3 
i 


在 上 述 代码 中 ，errorFn 就 是 获取 地 理 位 置信 息 失败 后 的 回调 函数 ， 输 出 一 些 错误 信息 ;successFn 是 成 
功 获取 后 的 回调 函数 ， 可 以 结合 一 些 框架 实现 地 理 定位 ， 比 如 百度 地 图 、Google Map API 等。 


区 2 2.12” 拖 放 AP1 新 特性 


拖 放 API 是 HTML 5 专门 为 了 鼠标 拖 放 新 增 的 7 个 事件 ， 可 以 分 成 以 下 3 个 部 分 。 
(1) 拖 动 的 源 对 象 〈source) 可 以 触发 的 事件 ， 如 表 2-2 所 示 。 

















































































































表 2-2 源 对 象 (source) 可 以 触发 的 事件 




















事 件 描述 
dragstart: 拖 动 开始 
drag: 拖 动 进行 中 
dragend: 拖 动 结束 

(2) 拖 动 的 目标 对 象 〈target) 可 以 触发 的 事件 ， 如 表 2-3 所 示 。 
表 2-3 目标 对 象 (target) 可 以 触发 的 事件 

事 件 描 述 
dragenter: 拖 动 进入 时 
dragover: 源 对 象 在 目标 对 象 上 方 时 
dragleave: 拖 动 离开 时 
drop: 鼠标 释放 时 





特别 需要 注意 的 一 点 是 ， 如 果 想 触发 drop 事件 ， 必 须 阻止 dragover 的 默认 行为 。 

(3) 源 对 象 和 目标 对 象 间 的 数据 传递 。 源 对 象 和 目标 对 象 间 的 数据 传递 可 以 使 用 全 局 变量 来 完成 ， 不 
过 ， 这 里 介绍 一 个 更 好 的 方法 ， 就 是 使 用 拖 放 事件 的 dataTransfer 属性 。 具 体 代码 如 下 。 

源 对 象 保存 数据 如 下 : 


source.onxxx=function (e) { 
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e.dataTransfer.setData('key', 'value'); 
Nk 


目标 对 象 接收 数据 如 下 : 


target .onxxx=function (e){ 
e.dataTransfer.getData('key'); 
} 


2.3 HTML 5 给 移动 Web 开发 带 来 的 优势 


HTML 5 并 非 适用 于 每 一 款 移动 设备 及 移动 Web 浏览 器 ， 比 如 ， 许 多 旧式 设备 、 非 智能 手机 及 平板 计 
算 机 都 无 法 很 好 地 支持 HIML 5。 但 是 ， 对 于 未 来 ， 我 们 有 充分 的 理由 来 为 那些 支持 HTML 5 的 移动 设备 
开发 应 用 程序 。 


2.3.1 HTML 5 包含 了 性 能 优良 的 API 


HTML 5 拥有 与 视频 、 音频 、Web 应 用 程序 、 编 辑 页 面 内 容 、 拖 动 以 及 展示 浏览 器 历史 等 功能 相关 的 API。” 
它们 在 移动 设备 上 表现 良好 ， 因 为 移动 设备 浏览 器 不 需要 为 这 些 功 能 特别 使 用 插件 或 附加 组 件 。 只 要 主要 
浏览 器 支持 HTML 5， 它 便 能 支持 API。 

另外 ，HTML 5 及 开放 Web 标准 还 提供 了 用 于 地 理 定位 、Web 存储 及 离线 Web 应 用 程序 的 API， 它 们 
都 非常 适合 在 移动 设备 上 使 用 。 大 部 分 智能 手机 和 平板 计算 机 都 带 有 GPS 或 其 他 地 理 定位 功能 。Web 存储 
可 将 一 个 标准 的 Web 页 面 变 成 应 用 程序 ， 并 将 数据 保存 在 移动 设备 上 。 离 线 应 用 程序 在 手机 无 法 连接 网 络 
时 可 发 挥 巨大 作用 。 事 实 上 ， 移 动 设备 对 离线 功能 的 需求 比 一 般 的 桌面 计算 机 更 大 。 


2.3.2 HTML 5 便捷 的 开发 环境 


移动 设备 应 用 程序 的 开发 是 一 条 漫长 的 道路 , 对 于 大 部 分 Web 应 用 开发 者 来 说 , Objective-C 比较 难 懂 。 
不 过 ， 这 些 开发 者 已 经 具备 了 HTML4、CSS 及 JavaScript 的 相关 知识 。 掌 握 了 这 3 种 语言 ， 就 可 以 使 用 
HTML 5 及 开放 Web 标准 来 构建 优秀 的 移动 应 用 程序 了 。 

这 就 意味 着 对 于 以 前 做 过 Web 开发 的 人 员 来 说 ， 由 于 已 经 具备 了 语言 基础 ， 他 们 就 可 以 在 很 短 的 时 间 
内 开始 移动 应 用 的 开发 了 。 


2.3.3 备 受 青睐 的 Web 应 用 程序 


目前 ， 移 动 应 用 程序 的 受 欢 迎 程度 与 日 俱 增 ， 但 Web 应 用 却 结合 了 应 用 程序 与 浏览 器 两 者 的 优点 。 
HTML 5 Web 应 用 通过 移动 设备 运行 , 这 样 用 户 既 可 以 将 其 加 入 书签 并 使 用 其 熟悉 的 工具 ,又 可 以 享受 到 
与 典型 应 用 一 样 的 特征 和 功能 。 
为 移动 设备 开发 的 HTML 5 Web 应 用 可 以 在 非 移动 设备 的 HTML 5 浏览 器 中 运行 ， 其 主要 功能 由 该 应 
的 编码 确定 ， 开 发 人 员 只 要 为 标准 Web 浏览 器 及 移动 设备 创建 不 同 的 样式 表 即 可 。 与 为 每 个 新 平台 开发 
个 独立 的 应 用 相 比 ， 维 护 成 本 显然 低 得 多 。 
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2.4 就业 面试 技巧 与 解析 


2.4.1 ”面试 技巧 与 解析 (一 ) 


面试 官 : 请 问 你 在 开发 中 经 常用 到 哪些 HTML 5 新 特性 ? 
应 聘 者 : 我 经 常用 到 的 HTML 5 新 特性 有 以 下 几 个 : 

。 用 于 绘画 的 canvas 元 素 。 

。 用 于 媒介 回放 的 video 和 audio 元 素 。 

。 对 本 地 离线 存储 的 更 好 的 支持 。 









































新 的 特殊 内 容 元 素 ， 如 article、footer、header、nav、section 。 
新 的 表单 控件 ， 如 calendar、date、time、email、url、search 。 


2.4.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : 请 谈 谈 对 HTML 5 的 理解 。 

应 聘 者 : HTML 5 从 广义 上 可 以 说 是 前 端 开发 中 各 种 最 新 技术 的 总 称 ， 包 含 了 HTML 5、CSS 3、 
JavaScript、ES 6 和 各 种 开源 框架 等 最 新 前 端 开发 技术 的 总 和 。HTML 5 广泛 而 深入 地 吸收 了 移动 互联 网 时 
代 的 技术 要 点 ， 再 加 上 自身 跨 平 台 、 免 安装 、 更 新 快 等 优势 ， 使 其 逐渐 成 为 现代 互联 网 和 移动 互联 网 开发 
的 核心 技术 。 
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使 用 HTML 5 设计 移动 页 面 结构 


EP 学 习 指引 


随 着 高 端 手机 的 盛行 ， 移 动 互联 应 用 开发 也 越 来 越 受 到 人 们 的 重视 ， 用 HTML 5 开发 移动 应 用 是 一 个 
不 错 的 选择 。 结 合 当前 流行 的 jQuery Mobile 库 ， 开 发 移动 端 页 面 项 目 就 变 得 简单 多 了 。 有 关 jQuery Mobile 
库 的 内 容 将 在 本 书 第 12 一 第 17 章 详细 介绍 ， 本 章 将 主要 介绍 HTML 5 的 一 些 元 素 。 


”重点 导读 


。 掌 握 HTML 5 结构 元 素 。 
。 掌 握 HTML 5 分 组 元 素 。 
。 掌 握 HTML 5 文本 语义 元 素 。 
.掌握 HTML 5 交互 体验 元 素 。 
。 掌 握 HTML 5 新 多 媒体 元 素 。 
“掌握 HTML 5 新 增 全 局 属性 。 


















































<header> 
< <nav> 
3.1 结构 元 素 
<Section> 
目前 ， 许 多 移动 网 页 都 包含 <div id="nav">、<div class="header"> 或 | 
者 <div id="footer"> 等 HTML 代码 ， 来 指明 导航 链接 、 头 部 以 及 尾部 。 ae 
为 此 ，HTML 5 提供 了 新 的 结构 元 素来 明确 一 个 Web 页 面 的 不 同 部 分 ， | <footer> | 
如 图 3-1 所 示 。 图 3-1 新 的 结构 元 素 
3.1.1 <header> 元 素 
<header> 元 素描 述 了 文档 的 头 部 区 域 ， 用 于 定义 内 容 的 介绍 展示 区 域 。 在 页 面 中 用 户 可 以 使 























<header> 元 素 。 
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【 例 3-1】 (实例 文件 ，ch03\Chap3.1.html〉<header> 元 素 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<body> 
<header> 
<h1>《 花 到 行 》 </hl> 
</header> 
<article> 
<header> 
<h1> 千 呼 万 唤 始 出 来 , 犹 抱 琵 亚 半 造 面 .</h1> 
</header> 
<h1> 嗜 嗜 切 切 错 杂 弹 ,大 珠 小 珠 落 玉 瘟 .</h1> 
</article> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap3.1.html 文件 ， 在 正 浏览 器 


中 运行 的 结果 如 图 3-2 所 示 。 


提示 : 在 HTML 5 中 ， 一 个 <header> 元 素 通常 包括 至 少 一 


个 (hl 一 h6 ) 元 素 ， 也 可 以 包括 hgroup 元 素 、nav 元 素 ， 还 可 
以 包括 其 他 元 素 。 但 是 <header> 标 签 不 能 被 放 在 <footer>、 
<address> 或 者 另 一 个 <header> 元 素 内 部 。 


3.1.2 ”<nav> 元 素 


<nav> 用 来 将 具有 导航 性 质 的 链接 划分 在 一 起 , 使 代码 结 





- oO x 
于 GUsersaionanDoc PD - @ | 匡 caseraiangNDo x 
KAD WE) EV) tN IRT) WM) 


《琵琶 行 》 
千 呼 万 唤 始 出 来 ， 犹 把 琵琶 半 谈 面 。 
嘲 噶 切切 错 条 弹 ， 大 珠 小 珠 落下 盘 。 


100% ~ 





图 3-2 使 用 <header> 元 素 后 的 运行 结果 


在 语义 化 方面 更 加 准确 ,同时 对 于 屏幕 阅读 器 等 设备 的 支持 也 更 好 。 具体 来 说 , nav 元 素 可 以 用 于 以 下 这 


些 场合 。 


。 传统 导航 条 : 现在 主流 网 站 上 都 有 不 同 层级 的 导航 条 ， 其 作用 是 将 当前 画面 跳 转 到 网 站 的 其 他 主要 
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页 面 上 去 。 





。 侧 边栏 导航 : 现在 主流 博客 网 站 及 商品 网 站 上 都 有 侧 边栏 导航 ， 其 作用 是 将 页 面 从 当前 文章 或 当前 


商品 跳 转 到 其 他 文章 或 其 他 商品 页 面 上 去 。 


。 页 内 导航 : 作用 是 在 本 页 面 几 个 主要 的 组 成 部 分 之 间 进 行 跳 转 。 
。 翻 页 操作 : 是 指 在 多 个 页 面 的 前 后 页 或 博客 网 站 的 前 后 篇 文章 滚动 。 

其 他 : 可 以 用 于 其 他 所 有 用 户 觉得 是 重要 的 、 基 本 的 导航 链接 组 中 。 
和 如 果 文 档 中 有 “前 后 ”按钮 , 则 应 该 把 它 放 到 <nav> 元 素 中 。 另外 , 一 个 页 面 中 可 以 拥有 多 个 <nav> 
元 素 ， 以 作为 页 面 整体 或 不 同 部 分 的 导航 。 
【 例 3-2】 实例 文件 ，ch03\Chap3.2.html〉<nav> 元 素 的 使 用 。 代 码 如 下 : 





<!DOCTYPE html> 
<html> 
<head> 
<title><nav> 元 素 的 使 用 </title> 
</head> 
<body> 
<h2> 技 术 资 料 </h2> 
<nav> 
<ul> 
<1i><a href="/html/">HTML 5 基础 教程 </a> </1i> 
<li><a href="/Android/">Android 基础 教程 </a> </1i> 
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<li><a href="/js/">JavaScript 教程 </a> </1i> 
<li><a href="/jquery/">jQuery Mobile 教程 </a></1i> 
</ul> 
</nav> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap3.2.html 文件 ， 在 正 浏览 器 一 一 一 ~ 
行 的 结果 如 图 3-3 所 示 。 站 CNusersqiangu\poc 局 * 号] 感 <nav> 元 素 的 使 用 
注意 : 在 HTML 5 中 不 要 用 menu 元 素 代 替 nav 元 素 ，menu ON 
元 素 是 用 在 一 系列 发 出 命令 的 菜单 上 的 ， 是 一 种 交互 性 的 元 素 , 或 “技术 资料 
者 更 确切 的 说 是 使 用 在 Web 应 用 程序 中 的 。 * HDLi 汉 础 到 各 





由 




















3.1.3 <section> 元 素 


100% 


图 3-3 使 用 元 运行 结 
<section> 元 素 定义 了 文档 中 的 节 ， 如 章节 、 页 丑 、 页 肢 或 文档 。 图 3 3 使 用 <naw> 元 素 后 的 运行 结果 
的 其 他 部 分 。 它 可 以 与 hl 、h2、h3、h4、h5、h6、p 等 元 素 结合 起 来 使 用 ， 标 示 文 档 结构 。 


【 例 3-3】 实例 文件 ，ch03\Chap3.3.html〉<section> 元 素 的 使 用 。 代 码 如 下 : 
<!DOCTYPE HTML> 








入 





<html> 
<head> 
<title><section> 元 素 的 应 用 </title> 
</head> 
<body> 
<section> 
<h3>《 游 子 吟 》</h3> 
<P> 慈 母 手中 线 ,</P> Sr 
<p> 游 子 身上 衣 .<. /p> @ 司 CUsers\qiangu\Doc 户 ”0 | 车 <section > 元素 的 应 月 
</section> 文体 中。 六 名 (E) 查 要 (V) 自若 译 (A) 工具 (部 翅 (H) 
<section> 
<h3>《 池 上 》</h3> 人 游子 克 》 
<p> 小 娃 排 小 艇 ,</p> a 
<P> 偷 采 白 莲 回 .</p> 游子 身上 衣 。 
</section> 《池上 》 
</body> 
</html> 小 娃 撑 小 手 ， 
相关 的 代码 实例 可 参考 Chap3.3.html 文件 ,在 正 浏览 器 中 运 名 Ea 
行 的 结果 如 图 3-4 所 示 ， 实 现 了 内 容 的 分 块 显 示 。 EE 








图 3-4 使 用 <section> 元 素 后 的 运行 结果 
3.1.4 <article> 元 素 





<article> 元 素 定义 外 部 的 内 容 。 外 部 内 容 可 以 是 来 自 一 个 外 部 新 闻 提供 者 的 一 篇 新 文章 , 或 者 来 自 blog 
的 文本 ,或 者 是 来 自 论坛 的 文本 ,或 者 是 来 自 其 他 外 部 的 源 内 容 。 

【 例 3-4】 实例 文件 ，ch03\Chap3.4.html》<article> 元 素 的 使 用 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<title><article> 元 素 的 使 用 </title> 


</head> 
<body> 
<article> 


<h1> 态 度 决定 一 切 , </h1> 
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RN 
<p> 细 节 决 定 未 来 .</p> 
</article> - OO x 
</body> @ 关 CAUsers\qiangu\Doc 只 - C 刁 <artide> 元 可 的 使 用 
</html> 文件 (篇 加 ( 查看 V) 。 收 功夫 (A) 工具 (T) 帮助 (H) 
相关 的 代码 实例 可 参考 Chap3.4.html 文件 ， 在 正 浏览 器 | 态度 次 定 _- 切 
中 运行 的 结果 如 图 3-5 所 示 ， 实 现 了 外 部 内 容 的 定义 。 
细节 决定 未 来 。 


3.1.5 “<aside> 元 素 


<aside> 元 素 一 般 用 来 表示 网 站 当前 页 面 或 文章 的 附属 信 图 3-5 使 用 <article> 元 素 后 的 运行 结果 
息 部 分 ， 它 可 以 包含 与 当前 页 面 或 主要 内 容 相关 的 广告 、 导 
航 条 、 引 用 、 侧 边栏 评论 部 分 ， 以 及 其 他 区 别 于 主要 内 容 的 部 分 。 
<aside> 元 素 主要 有 以 下 两 种 使 用 方法 : 
(1) 被 包含 在 <article> 元 素 中 作为 主要 内 容 的 附属 信息 部 分 , 其 中 的 内 容 可 以 是 与 当前 文章 有 关 的 资料 、 
名 次 解释 等 。 
aside 标签 的 代码 结构 如 下 : 
<article> 
<h1>.….</Vh1> 
<p>..< /p> 
<aside>…</aside> 
</article> 
(2) 在 <article> 元 素 之 外 使 用 ， 作 为 页 面 或 站 点 全 局 的 附属 信息 部 分 。 最 典型 的 是 侧 边栏 ， 其 中 的 内 容 
可 以 是 友情 链接 ， 博 客 中 的 其 他 文章 列表 、 广 告 单元 等 。 
aside 标签 的 代码 结构 如 下 : 
<aside> 
<h2>.…</h2> 
<ul> 
<adixSR<yad> 
KIRA<Vdd> 
</ul> 
<h2>.……</h2> 
<ul> 
BP 
<1i>...</1i> 
</ul> 
</aside> 


【 例 3-5】 实例 文件 ，ch03\Chap3.5.html〉<aside> 元 素 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 
<htm1> 
<head> 
<title><aside> 元 素 的 应 用 </title> 
</head> 
<body> 
<p> 人 在 一 起 叫 聚 会 , 心 在 一 起 叫 团 队 ! </p> 


<aside> 
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<h4> 微 笑 </h4> 
<p> 微 笑 是 春日 里 的 一 场 小 十 ,是 寒冬 里 的 一 续 阳 光 ! </p> 
</aside> 
</body> 
</html> 
相关 的 代码 实例 可 参考 Chap3.5.html 文件 ， 在 正 浏览 一 一 ~ 
中 运行 的 结果 如 图 3-6 所 示 。 @ 图 cAUsers\qiangu\Doc 只 -上古 <aside> 元 素 的 应 用 
提示 : <aside> 元 素 可 位 于 布局 的 任意 部 分 ， 用 于 表示 任何 | 3 SY 93 TR WH 
非 文 档 主要 内 容 的 部 分 。 例 如， 可 以 在 <section> 元 素 中 加 入 一 “| 入 在 -起 M 司 会, 心 在 -起 中 团队 ! 
个 <aside> 元 素 ,其 至 可 以 把 该 元 素 加 入 一 些 重要 信息 中 ,例如 ， “| 谢 











文字 引用 。 微笑 是 春日 里 的 一 场 小 十 ， 是 寒冬 里 的 一 缕 阳 光 ! 
一 肥 100% 
3.1.6 ”<footer> 元 素 图 3-6 使 用 <aside> 元 素 后 的 运行 结果 











回 
footer 元 素 可 以 作为 其 上 层 父 级 内 容 区 块 或 是 一 个 根 区 块 的 脚注 。footer 通常 包括 其 相关 区 块 的 脚注 信 
如 作者 、 相 关 阅 读 链 接 及 版 权 信息 等 。 
【 例 3-6】 〈 实 例文 件 ， ch03\Chap3.6.html) <footer> 元 素 的 使 用 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<body> 
<footer> 
<ul> 
<1i> 版 权 信息 </1i> 
<1i> 站 点 地 图 </1i> 
<1i> 联 系 方式 </1i> 
</ul> @ 一 口 X 
</footer> 站 CUsers\qiangu\Doc PD - 上 @ cAUsers\qiangu\Do| 
2 文件 (有 入 各 日 ” 理 看 V) 收藏 交 (A) 工具 (帮助 (H) 
相关 的 代码 实例 可 参考 Chap3.6html 文件 , 在 正 浏览 器 自 权 信息 
中 运行 的 结果 如 图 3-7 所 示 。 a 
提示 : 与 <header> 元 素 一 样 ， 一 个 页 面 中 也 未 限制 i 
<footer> 元 素 的 个 数 。 同 时 ， 可 以 为 <article> 元 素 或 <section> 
元 素 添 加 <footer> 元 素 。 


溃 




















3.2 分 组 元 素 


分 组 元 素 可 以 对 页 面 中 的 内 容 进 行 分 组 ， 在 HTML 5 中 涉及 3 个 与 分 组 有 关 的 元 素 ， 分 别 是 <hgroup> 
元 素 、<figure> 元 素 和 <figcaption> 元 素 。 











3.2.1 <hgroup> 元 素 














<hgroup> 元 素 用 于 对 网 页 或 区 段 (section〉 的 标题 进行 组 合 ，<hgroup> 元 素 通常 会 将 h1 一 h6 元 素 进行 
分 组 ， 矢 如 一 个 内 容 区 块 的 标题 及 其 子 标题 算 一 组 ，<hgroup> 的 使 用 代码 结构 如 下 : 


<hgroup> 
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De 
<h2>...</h2> 
</hgroup> 
【 例 3-7】〔 实 例文 件 ，ch03\Chap3.7.html)〉 <hgroup> 元 素 的 使 用 。 代 码 如 下 : 


<!DOCTYPE html> 











<html> 
<body> 
<article> 
<header> 
<hgroup> 
<h1> 文 章 主 标题 </h1> 
<h2> 文 章 子 标题 </h2> 
</hgroup> 
<p><time datetime="2018-05-29">2018 年 05 月 29 日 </time></p> 
</header> 
<p> 文 章 正文 </p> 
</article> 
</body> 
</html> 
相关 的 代码 实例 可 参考 Chap3.7.html 文件 ， 在 正 浏览 器 中 运 一 二 到 
行 的 结果 如 图 3-8 所 示 。 < [BE ry Er 
注意 ; 如 果 文 章 只 有 一 个 主 标题 ,是 不 需要 <hgroup> 元 素 的 。 如 
果 文 章 有 主 标题 ， 主 标题 下 有 子 标题 ， 就 需要 使 用 <hgroup> 元 素 了 。 ”文章 主 标题 
a 文章 了 标题 
i 3.2.2 <figure> 元 素 2018 年 05 月 29 晶 
文章 正文 
<figure> 元 素 是 一 种 元 素 的 组 合 ， 可 带 有 标题 (可 选 )。figure | A 











标签 用 来 表示 网 页 上 一 块 独立 的 内 容 , 将 其 从 网 页 上 移 除 后 不 会 对 ”图 3.8 使 用 <hgroup> 元 素 后 的 运行 结果 
网 页 上 的 其 他 内 容 产生 影响 。figure 所 表示 的 内 容 可 以 是 图 片 、 统 
计 图 或 代码 实例 。figure 标签 的 使 用 代码 结构 如 下 : 

1 


<P>.…</P> 
</figure> 


注意 : 使 用 <figure> 元 素 时 ， 需 要 figcaption 元 素 为 figure 元 素 组 添加 标题 。 不 过 ， 一 个 <figure> 元 素 内 
最 多 只 允许 放置 一 个 figcaption 元 素 ， 其 他 元 素 可 无 限 放置 。 

【 例 3-8】 “实例 文件 :ch03\Chap3.8.html) <figure> 元 素 的 使 用 。 代 码 如 下 : 

<!DOCTYPE HTML> 


<html> 
<body> 
<P> 向 日 黄花 ,为 菊 科 雏菊 属 植物 .别名 : 春 菊 , 马 兰 头 花 ,为 多 年 生 章 本 .向 日 黄花 耐寒 , 宜 冷 凉 气候 .在 炎热 条 件 下 开花 不 良 , 易 
枯死 .</P> 
<figure> 
<p> 向 日 黄花 </p> 
<img src="01.jpg” width="350" height="234" /> 
<p> 拍 摄 者 :我 爱 自 然 , 拍摄 时 间 :2018 年 07 月 </p> 
</figure> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap3.8.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-9 所 示 。 
注意 : <figure> 元 素 的 内 容 应 该 与 主 内 容 相关 ， 但 如 果 被 删除 ， 则 不 应 对 文档 流产 生 影响 。 
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二 
@ py | Pepe 
et WF SEV Wa IRC) wo0) 
同日 英信 ,为 病征 村 物 
Es 
拍摄 震 ， 我 爱 自然， 折 训 9j 问 ，2018 年 07 月 
我 100%6 


图 3-9 使 用 <figure> 元 素 后 的 运行 结果 


3.2.3 ”<figcaption> 元 素 

















<figcaption> 元 素 的 作用 是 为 <figure> 元 素 定 义 标题 。<figcaption> 元 素 应 该 被 置 于 <figure> 元 素 的 第 一 个 
或 最 后 一 个 子 元 素 的 位 置 。 

【 例 3-9】〔 实 例文 件 ，ch03\Chap3.9.html〉<figcaption> 元 素 的 使 用 。 代 码 如 下 : 

<1DOCTYPE HTML> 


<html> 
<body> 


<P> 向 日 黄花 ,为 菊 科 锥 菊 属 植物 .别名 : 春 菊 ,马兰 头 花 , 为 多 年 生 
草本 .向 日 黄花 耐寒 , 宜 冷 凉 气候 .在 炎热 条 件 下 开花 不 良 , 易 枯死 .</P> 


画 chueersqarewpeam PD ~ 6]| 窟 cnwin 
WG HEV (HAN IRM Bom 








， 为 多 年 生 革 本 ,向 日 整 视 而 


i 向 日 雪花 
<figure> EM . 
<p> 向 日 黄花 </p> 折扣 者 ， 供 受 自然 ， 拍 强 时 间 ，2015 年 07 月 
<img src="01.jpg" width="350" height="234" /> 


<figcaption> 向 日 黄 的 别名 为 :朝阳 花 、 转 日 莲 、 向 阳 花 、 望 
日 莲 、 太 阳 花 </figcaption> 
</figure> 
</body> 


A 向 日 区 的 别 吉 为 ， 困 泪花 、 转 日 送 、 向 阳 花 、 硅 日 要、 太阳 纶 
相关 的 代码 实例 可 参考 Chap3.9.html 文件 , 在 正 浏览 器 Ra 
中 运行 的 结果 如 图 3-10 所 示 。 3-10 ”使 用 <figcaption> 元 素 后 的 运行 结果 


<p> 拍 摄 者 :我 爱 自然 ， 拍 摄 时 间 :2018 年 07 月 </p> | “| 








3.3 ”文本 语义 元 素 


文本 语义 元 素 能 够 为 浏览 器 和 开发 者 清楚 地 描述 其 意义 ， 下 面 介绍 HTML 5 中 新 增 的 几 种 文本 语义 元 素 。 





3.3.1 <mark> 元 素 























9 

















<mark> 元 素 主要 用 来 在 视觉 上 向 用 户 呈 现 那些 需要 突出 显示 或 高 亮 显示 的 文字 。<mark> 元 素 的 一 个 比 
较 典型 的 应 用 就 是 在 搜索 结果 中 向 用 户 高 亮 显示 搜索 关键 词 。 其 使 用 方法 与 <em> 和 <strong> 有 相似 之 处 ， 
但 相 比 较 而 言 HTML 5 中 新 增 的 <mark> 元 素 在 突出 显示 时 ， 更 加 随意 与 灵活 。 具 体 使 用 的 代码 结构 如 下 : 
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<P>.… <mark>…-</mark> .</p> 


【 例 3-10】 (实例 文件 : ch03\Chap3.10.html) <mark> 元 素 的 使 
<h5> 元 素 创建 一 个 标题 “优秀 开发 人 员 的 素质 *， 然 后 通过 <p> 元 素 对 标题 进行 








在 页 面 中 ， 首 先 使 用 
阐述 。 在 阐述 的 文字 中 , 为 了 引起 用 户 的 注意 , 使 
代码 如 下 : 

<!DOCTYPE html> 

<html> 
<head> 
<title>mark 元 素 的 使 用 </title> 
</head> 
<body> 
<h5> 优 秀 开 发 人 员 的 <mark> 素 质 </mark></h5> 
<p. 


























> 

一 个 优秀 的 Web 页 面 开发 人 员 , 必须 具有 
<mark> 过 硬 </mark> 的 技术 与 
<mark> 务 实 </mark> 的 专业 精神 

</p> 

</body> 

</html> 














。 代 码 如 下 : 


























<mark> 元 素 高 亮 处 理 字符 “素质 ”过硬 ” 和“ 务实”。 


相关 的 代码 实例 可 参考 Chap3.10.html 文件 ， 在 正 浏览 器 中 


运行 的 结果 如 图 3-11 所 示 。 


提示 : <mark> 元 素 的 这 种 高 亮 显示 的 特征 ， 除 用 于 文档 中 突 
出 显示 外 ， 还 常用 于 查看 搜索 结果 页 面 中 关键 字 的 高 亮 显示 ， 其 


目的 主要 是 引起 用 户 的 注意 。 


注意 : 虽然 <mark> 元 素 在 使 用 效果 上 与 <em> 或 <strong> 元 素 
有 相似 之 处 , 但 三 者 的 出 发 点 是 不 一 样 的 。<strong> 元 素 是 作者 对 
文档 中 某 段 文字 的 重要 性 进行 的 强调 ;<em> 元素 是 作者 为 了 突出 
文章 的 重点 而 进行 的 设置 ; <mark> 元 素 是 数据 展示 时 ， 以 高 亮 的 


形式 显示 某 些 字符 ， 与 原作 者 本 意 无 关 。 
3.3.2 ”<rp>、<rt> 与 <ruby> 元 素 














<mby> 元 素 














- oO x 
@ 图 chueersqirgwpoc P - © | @ mar 
A(R 日， 可 丰 (V 必 而 (了 县 大 了 0H) 

优秀 开发 人 员 的 守 虹 


一 个 优秀 的 Web 贾 面 开发 人 员 ， 必 须 具有 过 要 的 技术 与 
的 收视 





扫 100% ~ 


3-11 使 用 <mark> 元 素 后 的 运行 结果 





个 或 多 个 字符 (需要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 <rf> 元 素 组 成 , 还 包括 可 选 的 <p> 


元 素 ， 定 义 当 浏览 器 不 支持 <ruby> 元 素 时 显示 的 内 容 。<p>、<art> 与 <muby> 元 素 结合 使 用 的 代码 结构 如 下 ; 


<ruby> 
<rt><rp>(</rp> <rp>)</rp></rt> 
</ruby> 


【 例 3-11】 《实例 文件 : ch03\Chap3.11.html) 使 用 <ruby> 元 素 注 释 繁体 字 “ 漠 ”。 


<!DOCTYPE html> 
<html> 
<body> 
<ruby> 
汉 <rt><rp> (</TP> 汉 <rp>)</rp></rt> 
</ruby> 
</body> 
</html> 





相关 的 代码 实例 可 参考 Chap3.11.html 文件 ， 在 正 浏览 器 中 运 


行 的 结果 如 图 3-12 所 示 。 


提示 : 支持 <ruby> 元 素 的 浏览 器 不 会 显示 <rp> 元 素 的 内 容 。 
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羡 cvserqiongu\boc -| 总 cavsers\qia 
文件 (有 ”第 轧 EE) 查考 (W) 收 襄 夫 (A) 工具 (T) 帮助 (H) 
并 级 





夸 100% ~ 


使 用 <ruby> 元 素 后 的 运行 结果 





图 3-12 


3.3.3 ”<time> 元 素 





<time> 元 素 是 HIML 5 新 增加 的 一 个 标记 ， 用 于 定义 时 间或 日 期 。 该 元 素 可 以 代表 24 小 时 中 的 某 一 时 


第 贺 章 使 用 HTML 5 设计 移动 页 面 结构 








刻 ， 在 表示 时 刻 时 ， 人 允许 有 时 间 差 。 在 设置 时 间或 日 期 时 ， 只 需 将 该 元 素 的 属性 datetime 设 为 相应 的 时 间 








或 日 期 即 可 。 具 体 使 


<p> 
<time> 











代码 结构 如 下 : 





</time> 
</p> 
<p> 
<time datetime= 


</time> 
</p> 


【 例 3-12】〔 实 例文 件 ，ch03\Chap3.12.html〉》<time> 元 素 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<body> 
<hl>time 元 素 </h1> 
<p id="pl"> 
<time datetime="2018-3-17"> 
今天 是 2018 年 3 月 17 日 
</time> 
<p> 
<p id="p2"> 
<time datetime="2018-3-17T17:00"> 
现在 时 间 是 2018 年 3 月 17 日 晚上 5 点 
</time> 
<p> 
<p id="p3"> 
<time datetime="2018-12-31"> 
新 款 冬装 将 于 今年 年 底 上 市 
</time> 
</p> 
<p id="p4"> 
<time datetime="2018-3-15" pubdate="true"> 
本 消息 发 布 于 2018 年 3 月 15 日 
</time> 
</p> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap3.12.html 文件 ， 在 正 浏览 器 中 运 
行 的 结果 如 图 3-13 所 示 。 

代码 说 明 : 

。 <p> 元 素 ID 号 为 pl 中 的 <time> 元 素 表 示 的 是 日 期 页 面 在 














解析 时 ， 获 取 的 是 属性 datetime 中 的 值 ， 而 标记 之 间 的 内 容 只 是 
。 <p> 元 素 ID 号 为 p2 中 的 <time> 元 素 表示 的 是 日 期 和 时 间 ， 它 们 2 


- 0 x 
交 件 间 舌 红 玫 】 重 看 VI 必 间 失信 工具 Mm 大助 H) 

Time 元 素 

今天 是 2018 年 3 月 17 日 

现在 时 间 是 2018 年 3 月 17 日 晚上 5 点 








新 未 冬 装 将 于 今年 年 底 上 市 
本 消息 发 布 于 2018 年 3 月 15B 

R100% ~ 
图 3-13 使 用 <time> 元 素 后 的 运行 结果 

















显示 在 页 面 中 。 








可 











使 用 字母 T 进行 分 隔 。 如 果 在 





整个 日 期 与 时 间 的 后 面 加 上 一 个 字母 Z， 则 表示 获取 的 是 UTC 〈 世 界 统一 时 间 ) 格式 。 


。 <p> 元 素 ID 号 为 p3 中 的 <time> 元 素 表 示 的 是 将 来 时 间 。 
。 <p> 元 素 ID 号 为 p4 中 的 <time> 元 素 表 示 的 是 发 布 日 期 。 
注意 : 
期 为 发 布 日 期 。 





为 了 在 文档 中 将 这 两 个 日 期 进行 区 分 ， 在 最 后 一 个 <time> 元 素 中 增加 了 pubdate 属性 ， 表 示 此 日 
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SA 


提示 : <time> 元 素 中 的 可 选 属性 pubdate 表示 时 间 是 否 为 发 布 日 期 ， 它 是 一 个 布尔 值 ， 该 属性 不 仅 可 以 
用 于 <time> 元 素 ， 还 可 用 于 <article> 元 素 。 


3.3.4 <wbr> 元 素 





<wbr> 即 Word Break Opportunity。<wbr> 元 素 规定 在 文本 中 的 何 处 适合 添加 换行 符 。 如果 单词 太 长 , 或 


























者 用 户 担心 浏览 器 会 在 错误 的 位 置换 行 ， 那 么 就 可 以 使 用 <wbr> 元 素来 添加 单词 换行 时 机 。 
【 例 3-13】“〈 实 例文 件 ，ch03\Chap3.13.html) <wbr> 元 素 的 应 用 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 口 x 
<title><wbr> 元 素 的 应 用 </title> @ 知 CAUsers\qiangu\Doc PD-0| <w 
</head> 文件 (月 ” 编 强 (E) ”查看 V) 收藏 夫 (A) 工具 1” 
<body> 
<p> 尝 试 缩小 浏览 器 窗口 ,下 面 段 落 中 的 "XMLHttpRequest" 单 词 会 被 分 | 尝试 缩小 浏览 器 窗口 ， 下 面 段落 中 
行 :</p> 的 XMLHttpRequest 单 词 会 被 分 行 ， 
<p> 学 习 Ajax 之 前 ,开发 者 必须 熟悉 <wbr>Http<wbr>Request 对 | 学 习 hjax 之 前 ， 开 发 者 必须 熟悉 
象 .</P> HttpRequest 对 象 。 
</body> 
</html> 
相关 的 代码 实例 可 参考 Chap3.13.html 文件 , 在 下 浏览 器 中 运 too 


行 的 结果 如 图 3-14 所 示 。 图 3-14 ”使 用 <wbr> 元 素 后 的 运行 结果 


3.4 ”交互 体验 元 素 


HTML 5 不 仅 为 开发 者 增加 了 多 个 Web 页 面 特征 元 素 ,还 为 用 户 增加 了 交互 体验 元 素 , 如 <meter> 元 素 、 
<details> 元 素 和 <progress> 元 素 等 。 








3.4.1 <details> 元 素 


<details> 元 素 用 于 描述 文档 或 文档 某 个 部 分 的 细节 ， 常 常 与 <summary> 元 素 配合 使 用 ，<summary> 元 素 
提供 标题 或 图 例 。 标 题 是 可 见 的 ， 用 户 单 击 标题 时 ， 会 显示 细节 信息 。 具 体 使 用 的 代码 结构 如 下 : 


<details> 
<summary>.....</summary> 





























es 
【 例 3-14】 〈 实 例文 件 : ch03\Chap3.14.html) 使 用 <details> 元 素 制作 简单 页 面 。 代 码 如 下 : 


<!DOCTYPE HTML> 
<html> 
<body> 
<details> 
<summary> 苹 果 冰 淇 淋 </summary> 
<img src="02.jpg"” alt=" 蔷 果 冰 淇 淋 "/> 
<div> 
<h3> 材料 : 蔷 果 500g, 白糖 150g, 新 鲜 牛 奶 两 眶 -</h3> 
<p> 制 作 方法 :将 苹果 洗 净 ,去 皮 挖 核 , 切 成 薄片 挠 成 浆 状 , 放 入 白糖 及 1000 充 开 水 ,加 入 煮沸 的 牛奶 , 搅拌 均匀 , 倒 入 盛 
器 内 冷却 后 置 于 冰箱 冻结 即 成 . 
</p> 
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</div> 
</details> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap3.14.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 3-15 所 示 。 
单 击 “ 苹 果 冰 淇 淋 ” 左 侧 的 三 角 按钮 ， 即 可 展开 相应 的 细节 内 容 ， 如 图 3-16 所 示 。 


/GsersGinguDocuments/E X 



































FC 会 D Mey//cUsers/qiangWDocumen 光合 为 三 
I oT 站 吕 用 忆 此 四 京 S 央 Ct 
衬 果 冰 洪 淋 
pe 
A 


/CyUsers/qiangu/Docur X 

















3 GC © file///C/Users/qiar “为 | 三 

阁 最 十 访问 国 火 下 官方 基点 硬 新 手 上 路 » 0 攀 到 版 十 答 

* 苹果 冰淇淋 
材料 : 苹果 500g ,白糖 1509 ， 新 鲜 牛 奶 两 瓶 
制作 方法 : 将 军 困 沈 争 ， 去 皮 按 核 , 切 成 薄片 ， 抽 成 弥 杖 , 放 入 白糖 及 1000 克 开 
水 ， 加 入 剖 沸 的 牛奶 ， 捞 衬 均匀 ， 例 入 硬 器 内 冷却 后 亚 于 冰 畏 床 结 即 成 。 

图 3-15 使 用 <details> 元 素 后 的 运行 结果 图 3-16 细节 内 容 


3.4.2 ”<meter> 元 素 


<meter> 元 素 定 义 度量 衡 , 仅 用 于 已 知 最 大 值 和 最 小 值 的 度量 。 例 如 : 磁盘 使 用 情况 、 查 询 结果 的 相关 性 等 。 
【 例 3-15】 实例 文件 ，ch03\Chap3.15.html》 使 用 <meter> 元 素 展示 给 定数 据 的 范围 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title><meter> 元 素 的 应 用 </title> 

</head> 

<body> 
<p> 展 示 给 定 的 数据 范围 :</p> 
<p> 
徐 海 :<meter low="69" high="80" max="100" optimum="100" value="92"></meter> 
陈 露 :<meter low="69" high="80" max="100" optimum="100" value="72"></meter> 
李 雪 :<meter low="69" high="80" max="100" optimum="100" value="52"></meter> 














</p> 
</body> 
</html> <meter> 元 素 的 应 用 x a 
相关 的 代码 实例 可 参考 Chap3.15.html 文件 , 在 Firefox © fileyWCyUsersyqanouD CG QC 2 三 
浏览 器 中 运行 的 结果 如 图 3-17 所 示 。 本 I 














注意 : 下 浏览 器 不 支持 <meter> 元 素 ， 另 外 ，<meter> 二" 生 十 8 过 所 范围 : 
元 素 不 能 作为 一 个 进度 条 来 使 用 ， 进 度 条 的 制作 需要 使 用 。 各: 站 YK 二: Bo 4: 
<progress> 元 素 。 





图 3-17 使 用 <meter> 元 素 后 的 运行 结果 
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NS 


3.4.3 ”<progress> 元 素 




















<progress> 元 素 表 示 运 行 中 的 进程 ， 可 以 使 


























有 其 来 显示 JavaScript 


耗费 时 间 的 函数 的 进程 。 例 如 下 载 



































文件 时 , 文件 下 载 到 本 地 的 进度 值 可 以 通过 该 元 素 动态 展示 在 页 面 中 , 展示 的 方式 既 可 以 使 用 整数 (如 1 一 
100)， 也 可 以 使 用 百分比 (如 10% 一 100% )。 
<progress> 元 素 的 属性 及 描述 如 表 3-1 所 示 。 
表 3-1 <progress> 元 素 的 属性 及 描述 
属 性 值 描 述 
max 整数 或 浮 点 数 设置 完成 时 的 值 ， 表 示 总 体 工作 量 
value 整数 或 浮 点 数 设置 正在 进行 时 的 值 ， 表 示 已 完成 的 工作 量 





注意 : <progress> 元 素 中 设置 的 value 值 必须 小 于 或 等 于 max 属性 值 ， 且 两 者 都 必须 大 于 0。 





【 例 3-16】 (实例 文件 : ch03\Chap3.16.html) 使 有 











<!DOCTYPE HTML> 

<html> 

<body> 
对 象 的 下 载 进度 : 
<progress value="50" max="100"> 
</progress> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap3.16.html 文件 ， 在 下 浏览 器 


[e: 





运行 的 结果 如 图 3-18 所 示 。 


3.4.4 <summary> 元 素 








户 单 击 标题 时 会 显示 详细 信息 。 


<summary> 元 素 为 <details> 元 素 定 义 一 个 可 见 的 标题 。 当 用 


<progress> 元 素 表 示 下 载 进度 。 代 码 如 下 : 





0 
@ 面 cwenwewpaD- 0 | veereaiong Do x 
文件 骨 妨 坟 (E) 二 看 (V】 收 戎 夫 (A)， 工具 训 助 (1) 

对 象 的 下 载 进度 ， Eee 


x 


于 100% ~ 


3-18 ”使 用 <progress> 元 素 后 的 运行 结果 





【 例 3-17】( 实 例文 件 : ch03\Chap3.17.html) 使 用 <summary> 





元 素 展示 详细 信息 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<title><summary> 元 素 的 应 用 </title> 
</head> 
<body> 
<details> 
<summary>《 池 上 》</summary> 
<p> 小 娃 撑 小 艇 ,</p> 
<p> 偷 采 白 莲 回 .</p> 
<P> 不 解 藏 踪迹 ,</p> 
<p> 浮 萍 一 道 开 .</p> 
</details> 
</body> 
</html> 





相关 的 代码 实例 可 参考 Chap3.17.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 3-19 所 示 。 








E: 








池上 ” 左 侧 的 三 角 按钮 ， 即 可 . 
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展开 相应 的 细节 内 容 ， 如 





图 








3-20 所 示 。 
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D filey//C/Users/qiar = 三 
次 量 沪 辣 国 火 了 寺 方 站 二 区 新 手 上 入 六 0 移动 所 答 


© © filey//C/Users/qia 
次 最 时 访问 国 火 风 计 方 站点 入 新 手 上 路 
* 《池上 》 











图 3-19 使 用 <summary> 元 素 后 的 运行 结果 图 3-20 ”细节 内 容 


3.5 ”新 多 媒体 元 素 


目前 ， 在 网 页 上 没有 关于 音频 和 视频 的 标准 ， 多 数 音频 和 视频 都 是 通过 插件 来 播放 的 。 为 此 ，HTML 5 
新 增 了 多 媒体 元 素 ， 如 <audio> 元 素 、<video> 元 素 、<source> 元 素 、<embed> 元 素 等 。 





3.5.1 <audio> 元 素 


<audio> 元 素 主 要 是 定义 播放 声音 文件 或 者 音频 流 的 标准 。 它 支持 3 种 音频 格式 , 分 别 为 OGG、MP3 
和 WAV。 如 果 需 要 在 HTML 5 移动 网 页 中 播放 音频 ， 输 入 的 基本 格式 如 下 : 


<audio src="song.mp3" controls="controls"> 
</audio> 


提示 : 其 中 src 属性 是 规定 要 播放 的 音频 的 地 址 ，controls 属性 是 供 添加 播放 、 暂 停 和 音量 控件 。 另 外 ， 
在 <audio> 与 </audio> 之 间 插 入 的 内 容 是 供 不 支 持 <audio> 元 素 的 浏览 器 显示 的 。 

【 例 3-18】〗 〈 实 例文 件 : ch03\Chap3.18.html) <audio> 元 素 的 应 用 。 代 码 如 下 : 

<!DOCTYPE html> 

















<html> 
<head> 
<title>audio</title> 
<head> 
<body > = 
<audio src="song.mp3" controls="controls"> 画 GWsesqaawpocp ”| 节 audio @ 
</audio> 文件 中 入 纺 (E) 吉大 (/) 改 基 变 A| 工具 (只 取 (H 
</body> i 
</html> (ORE (g) 国 
相关 的 代码 实例 可 参考 Chap3.18.html 文件 ， 在 
IE11.0 浏览 器 中 运行 的 结果 如 图 3-21 所 示 。 
R100% ~ 











注意 : IE 9.0 以 前 的 版 本 浏览 器 不 支持 audio 标签 。 图 321 <audio> 元 素 


3.5.2 ”<video> 元 素 


<video> 元 素 主要 是 定义 播放 视频 文件 或 者 视频 流 的 标准 。 它 支持 3 种 视频 格式 , 分 别 为 OGG、WebM 
和 MPEG 4。 如 果 需 要 在 HTML 5 移动 网 页 中 播放 视频 ， 输 入 的 基本 格式 如 下 : 
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<video src="mov.mp4" controls="controls"> 
</ video > 


另外 ， 在 <video> 与 </ video > 之 间 插 入 的 内 容 是 供 不 支持 <video> 元 素 的 浏览 器 显示 的 。 


【 例 3-19】 


<!DOCTYPE 
<html> 
<head> 

















(实例 文件 ，ch03\Chap3.19.html) <video> 元 素 的 应 用 。 代 码 如 下 : 
htm]l> 





<title>video</title> 


<head> 
<body > 


<video src="mov.mp4" controls="controls"> 
</ video > 


</body> 
</html> 


相关 的 代码 实例 可 参考 Chap3.19.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-22 所 示 。 
浏览 器 中 ， 可 以 看 到 加 载 的 视频 控制 条 界面 ， 单 击 “ 播 放 ” 按 钮 ， 即 可 查看 视频 的 内 容 ， 如 


在 Firefox 


-23 所 示 。 


@ 









| _ 交 ft 编 各 6 VA 工具 入 HI 


Ww/ 
a 
” 

















- D x 


站 GNuUsersqiargupocP - 0| Evideo @ ey///C/Useraaio 2 


次 最 是 访问 国 火 攻 官方 站 点 总 新 手 上 洛 交口 移动 版 书签 








二 100% ~ 





图 3-22 使 用 <video> 元 素 后 的 运行 结果 图 3-23 视频 内 容 


3.5.3 ”<source> 元 素 





<source> 元 素 为 媒体 元 素 定义 媒体 资源 ， 其 允许 用 户 规定 两 个 视频 /音频 文件 供 浏览 器 根据 它 对 媒体 类 
型 或 者 编 解 码 器 的 支持 进行 选择 。 


【 例 3-20】 
<!DOCTYPE 
<html> 
<head> 


(实例 文件 ，ch03\Chap3.20.html) <source> 元 素 的 应 用 。 代 码 如 下 ;: 
html> 


<title><source> 元 素 </title> 


</head> 
<body> 


<audio controls> 
<source src="song.mp3" type="audio/mpeg"> . 


</audio> 国 csers\qiongu\poc 人 -Ci 层 <source> 元 率 
</body> 文件 (有 ” 震 济 下) 查看 M) 收 茂 夫 (A) 工具 TT 帮助 (H) 
</html> 

相关 的 代码 实例 可 参考 Chap3 20html 文件 , 在 “区 ®) 











下 11.0 浏览 器 中 运行 的 结果 如 图 3-24 所 示 。 


中 3.5.4 ” <embed> 元 素 





050 








四 


100% v 





图 3-24 ”使 用 <source> 元 素 后 的 运行 结 














果 





<embed> 元 素 用 来 插入 各 种 多 媒体 ， 格 式 可 以 是 Midi、Wav、AIFF、AU、MP3 等 HTML 5 








代码 结 
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构 如 下 : 

<embed src="..."/> 一 口 狼 

i - | 国 CNuxersqiangwpoc P - 0 | 厦 cNusersvqianguNpo- 

【 例 3-21】 (实例 文件 : ch03\Chap3.21.html) 使 用 An ma EV ee IRM wi 
<embed> 元 素 插入 动画 。 代 码 如 下 : | 

<!1DOCTYPE HTML> a 

<html> 

<body> 

<embed src="images/ 飞 翔 的 海岛 .swf"/> 

</body> 可 

</html> 全。 ho 四 一 

相关 的 代码 实例 可 参考 Chap3.21.html 文件 ， 在 CT 
IE11.0 浏览 器 中 运行 的 结果 如 图 3-25 所 示 。 3-25 ”使 用 <embed> 元 素 后 的 运行 结果 








3.6 ”新 增 全 局 属性 


在 HTML 5 中 新 增 了 许多 全 局 属性 ， 如 contenteditable 属性 、spellcheck 属性 、draggable 属性 、data-* 
属性 等 ， 利 用 这 些 属性 可 以 轻松 制作 出 移动 页 面 结构 。 下 面 来 详细 介绍 常用 新 增 属 性 的 应 用 。 


3.6.1 contenteditable 属性 


contenteditable 属性 是 HTML 5 中 新 增 的 标准 属性 ， 其 主要 功能 是 指定 是 否 允 许 用 户 编辑 内 容 。 该 属性 
有 两 个 值 : tue 和 false。 为 内 容 指 定 contenteditable 属性 为 tue 表示 可 以 编辑 ，false 表示 不 可 编辑 。 如 果 没 
有 指定 值 则 会 采用 隐藏 的 inherit 继承》 状态 ， 即 如 果 元 素 的 父 元 素 是 可 编辑 的 ， 则 该 元 素 就 是 可 编辑 的 。 
【 例 3-22】 《实例 文件 ,ch03\Chap3.22.html) contentEditable 属性 应 用 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<head> 

<title>contenteditable 属性 应 用 实例 </title> 
</head> 

<body> 

<h3> 对 以 下 内 容 进行 编辑 </h3> 

<ol contenteditable="true"> 一 到 区 
<13> 列 表 一 </1iS @ 时 | C\Users\qiangu\Doc 只 ”C0C 居 conentEditalbe 属 性 


<1i> 列 表 二 </1i> 文件 (站 闫 名 (E) ”前 看 (V) 收藏 大 (A)】 工具 [T) 帮助 (H) 


<1i> 列 表 三 </1i> 本 
2 对 以 下 内 容 进行 编辑 


</body> 1 列表 一 

</html> 2 列表 二 

相关 的 代码 实例 可 参考 Chap3.22.html 文件 ， 在 IE11.0 
浏览 器 中 运行 的 结果 如 图 3-26 所 示 。 ao > 

注意 ; 对 内 容 进行 编辑 后 ， 如 果 关 闭 网 页 ， 编 辑 的 内 容 图 3-26 使 用 contenteditable 属性 后 的 运行 结果 
将 不 会 被 保存 。 如 果 想 要 保存 其 中 的 内 容 ， 则 只 能 把 该 元 素 的 innerHTML 发 送 到 服务 器 端 进行 保存 。 


3.6.2 ”data-* 属 性 

data-* 属 性 用 于 存储 私有 页 面 后 应 用 的 自 定义 数据 ， 该 属性 可 以 在 所 有 的 HTML 元 素 中 嵌入 数据 。 自 
定义 的 数据 可 以 让 页 面 拥有 更 好 的 交互 体验 ， 而 不 需要 使 用 Ajax 或 去 服务 端 查 询 数 据 。data-* 属 性 由 以 下 
两 部 分 组 成 : 
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。 属性 名 不 要 包含 大 写字 母 ， 在 data- 后 必须 至 少 有 一 个 字符 。 
。 该 属性 可 以 是 任何 字符 串 。 

【 例 3-23】 实例 文件 ，ch03\Chap3.23.html》data-* 属 性 应 用 实例 。 代 码 如 下 : 
<!DOCTYPE html> 

<html> 

<title> data-* 应 用 实例 </title> 

<script> 

function showDetails (animal) 


var animalType=animal .getAttribute ("data-animal-type"); 
alert (animal.innerHTML + "是 ”+ animalType + "."); 
} 
</script> 
</head> 
<body> 
<h1> 物 种 </h1> 
<P> 单 击 一 个 物种 ,看 看 它 是 什么 类 型 :</P> 
<ul> 
<li onclick="showDetails (this)"” id="owl” data-animal-type=" 鸟 类 "> 猫 头 座 </1i> 
<1i onclick="showDetails (this)" salmon”data-animal-type=" 鱼 类 "> 三 文 鱼 </1i> 
<1i onclick="showDetails (this)"” id="tarantula"” data-animal-type=" 师 蛛 "> 毒 蜂 蛛 </1i> 
</ul> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap3.23.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-27 所 示 。 
单 击 任何 一 个 动物 类 型 ， 即 可 弹出 一 个 信息 提示 框 ， 提 示 用 户 该 动物 属于 哪个 物种 类 型 ， 物 种 类 别 就 
是 data-* 属 性 的 值 ， 如 图 3-28 所 示 。 




















= - DO x 
四 CNueerevqiangu\poc 站 必 | 居 doto-* 袜 用 全 @ 司 CNusersvqiangw\poc P © @ data-" 应 用 示 刚 
文件 站 加 唱 (E) 查看 (/) 收 基 天 (A) 工具 (1 大 了 (H) 到 文件 (站 问 缠 [5) 查看 (V) 站 攻 交工 具 。 帮助 (H) 
物种 物种 亲自 网 页 的 消息 x|| 
点 击 一 个 物种 ， 看 看 它 是 什么 类 型 ， 点 击 一 个 物种 ， 看 看 它 是 什么 类 型 从 SR 
a :到 
“生计 本 
扫 100% ~ 成 1006 
3-27 ”使 用 data-* 属 性 后 的 运行 结果 3-28 ”显示 data-* 属 性 的 值 


办 3 6.3 draggable 属性 


draggable 属性 规定 元 素 是 否 可 拖 动 。 默 认 情况 下 ， 链 接 和 图 像 是 可 拖 动 的 。draggable 属性 经 常 月 
放 操作 。 

【 例 3-24】〔 实 例文 件 ，ch03\Chap3.24.html〉》draggable 属性 应 用 实例 。 代 码 如 下 : 

<!DOCTYPE HTML> 

<html> 

<head> 

<title> draggable 属性 应 用 实例 </title> 

<style type="text/css"> 

#divl {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 

</style> 

















EE 





052 


第 贺 章 使 用 HTML 5 设计 移动 页 面 结构 


<script type="text/javascript"> 
function allowDrop (ev) 
{ 

ev.preventDefault (); 


于 


function drag (ev) 
ev.dataTransfer.setData("Text",ev.target.id); 


} 


function drop (ev) 

省 
Var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild (document .getElementById (data)); 
ev.preventDefault (); 

本 

</script> 

</head> 

<body> 


<div id="divl" ondrop="drop(event)" ondragover="allowDrop (event)"></div> 

<br /> 

<p id="dragl"” draggable="true"” ondragstart="drag (event)"> 这 是 一 段 可 移动 的 段落 .请 把 该 段落 拖 入 上 面 的 
矩形 .</P> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap3.24.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-29 所 示 。 
拖 动 下 方 的 段落 ， 即 可 将 其 放置 到 上 方 的 矩形 中 ， 如 图 3-30 所 示 。 
党 口 x ws 0 x 


国 CNUeereqiangu\poc 站 -0 | 大 draggotle 必 性 应 用 .x hangu\Dor 户 - 上 | 世 draggable 尾 性 机 用 
4) NRE) BV) Wi) 工 RD WA 文 作 站 ” 娘 和 (日 前 看 (V】 收藏 闪 (A) 工具 T) 帮助 (H) 








的 请 把 该 段落 拖 入 上 面 的 


这 是 一 段 可 移动 的 段落 ， 请 把 该 段落 拖 入 上 面 的 矩形 。 





大 100% > 四 100% 7 


3-29 使 用 draggable 属性 后 的 运行 结果 3-30 ”显示 可 拖 动 的 段落 








3.6.4 spellcheck 属性 


spellcheck 属性 是 HTML 5 中 的 新 属性 , 规定 是 否 对 元 素 内 容 进行 拼写 检查 。 可 对 以 下 文本 进行 拼写 检 
查 : 类 型 为 text 的 input 元 素 中 的 值 〈 非 密码 )、textarea 元 素 中 的 值 、 可 编辑 元 素 中 的 值 。 

【 例 3-25】〔 实 例文 件 ，ch03\Chap3.25.html》 使 用 spellcheck 属性 的 实例 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<title>spellcheck 属性 的 应 用 </title> 


</head> 
<body> 

















053 


AN 
HTML 5 从 入 门 到 项 目 实 践 ( 超 值 版 ) 
WY 


<p contenteditable="true”spellcheck="true"> 使 用 spellcheck 属性 ,使 段落 内 容 可 被 编辑 .</p> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap3.25.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-31 所 示 。 
选中 需要 编辑 的 文字 进行 编辑 操作 ， 如 这 里 在 页 面 中 输入 “你 好 !1”， es 3-32 所 示 。 














- 0O x 
司 CUsers\qiangu\Dor D -5 | 刁 spellcheck 必 性 的 应 用 
文件 由 六 坊 (E) 二 看 (V) 收藏 夫 (A) 工具。 帮助 (H) 


= 口 x 
闻 GNusersqiangu\poc ~ 必 | 大 :pellcheck 量 性 的 可 用 
文件。 纺 和 (日 ， 坦 看) 收 基 夫 (AI 工具 中 帮助 (H) 


使 用 spsllcheck 属 性 ， 使 段落 内 容 可 被 编辑 , 使 用 spellcheck 属 性 ， 你 好 ! 














四 1006 ~ R100% ~ 


3-31 使 用 spellcheck 属性 后 的 运行 结果 3-32 ”编辑 文字 








3.7 ”就 业 面试 技巧 与 解析 


3.7.1 面试 技巧 与 解析 (一) 


面试 官 : HTML 5 中 新 多 媒体 元 素 有 哪些 ? 
全 出 本 HTML 5 中 新 多 媒体 元 素 有 以 下 几 种 。 








audio 元 素 : 主要 是 定义 播放 声音 文件 或 者 音频 流 的 标准 。 

Video 元 素 : 主要 是 定义 播放 视频 文件 或 者 视频 流 的 标准 。 

<source> 元 素 : 为 媒体 元 素 定义 媒体 资源 ， 其 允许 用 户 规定 两 个 视频 /音频 文件 供 浏览 器 根据 它 对 媒 
体 类 型 或 者 编 解码 器 的 支持 进行 选择 。 

embed 元 素 : 用 来 插入 各 种 多 媒体 ， 格 式 可 以 是 Midi、Wav、AIFF、AU、MP3 等 。 


3.7.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : HTML 5 中 分 组 元 素 有 哪些 ? 
应 聘 者 : HTML 5 中 分 组 元 素 有 以 下 3 种 : 
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<hgroup> 元 素 : 用 于 对 网 页 或 区 段 〈section) 的 标题 进行 组 合 ， 其 通常 会 将 h1 一 h6 元 素 进行 分 组 ， 
譬如 一 个 内 容 区 块 的 标题 及 其 子 标题 算 一 组 。 

<figure> 元 素 : 用 来 表示 网 页 上 一 块 独立 的 内 容 ， 将 其 从 网 页 移 除 后 不 会 对 网 页 中 的 其 他 内 容 产生 
影响 。 
<figcaption> 元 素 ， 用 于 为 <figure> 元 素 定 义 标题 























第 4 章 
使 用 HTML 5 设计 移动 页 面 表单 


二 学 习 指引 


HTML 5 表单 可 以 用 来 在 网 页 上 显示 特定 的 信息 ,网 站 管理 者 要 实现 与 浏览 者 之 间 的 沟通 , 就 必须 借 
助 于 表单 。 表 单 通常 用 于 用 户 注 册 、 调 整 表 与 搜索 界面 等 。 在 HTML 5 中 ， 表 单 拥有 多 个 新 的 表单 输入 类 
型 ， 这 些 新 类 型 为 用 户 提供 了 更 好 的 输入 控制 和 用 户 验证 。 


”重点 导读 


“ 热 悉 HIML 5 表单 元 素 。 

。 掌 握 HTML 5 新 增 表单 元 素 。 

， 热 悉 HTML 5 表单 元 素 的 输入 类 型 。 
.掌握 HIML 5 表单 的 属性 。 

。 掌 握 HTML 5 表单 的 验证 。 


4.1 认识 表单 


表单 在 设计 移动 页 面 中 起 着 重要 的 作用 ， 它 是 服务 器 与 用 户 交互 信息 的 主要 手段 。 一 个 表单 至 少 应 该 
包括 说 明 性 文字 、 用 户 填写 的 表格 、 提 交 和 重 填 按钮 等 内 容 。 


4.1.1 表单 概述 










































































表单 主 八 集 网 页 上 浏览 者 的 相关 信息 。 其 标签 为 <form></form>。 表 单 的 基本 语法 格式 如 下 :  “ 
<form action="url" method="get|post" enctype="mime"> 
</form > 

其 中 ，action=" 








url"， 指 定 处 理 提交 表单 的 格式 ， 它 可 以 是 一 个 URL 地 址 或 一 个 电子 邮件 地 址 。method="get| 
post"， 指 明 提 交 表 单 的 HITP 方法 。enctype="mime"， 指 明 用 来 把 表单 提交 给 服务 器 时 的 互联 网 媒体 形式 。 
表单 是 一 个 能 够 包含 表单 元 素 的 区 域 ， 通 过 添加 不 同 的 表单 元 素 ， 将 显示 不 同 的 效果 。 
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【 例 4-1】〔 实 例文 件 ，ch04\Chap4.1.html) 一 个 简单 的 表单 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<body> 

<form> 

下 面 是 输入 用 户 登 录 信息 

<br><br> 

用 户 名 称 <br> 

<input type="text" name="user"> 

<br> Q | @ necvu » 
加 fleJWcyUs 加 

用 户 密码 <br> 柳 最 访问 辣 火 志方 »> DnB 

ee type="password" name="password"> 下 面 号 输入 用 户 登 录 信 息 

<input type="submit” value=" 登 录 "> 用 户 名 称 

</form> | | 

</body> i ] 

</html> 


登录 
相关 的 代码 实例 可 参考 Chap4.1.html 文件 ， 在 Firefox 浏览 器 
中 运行 的 结果 如 图 4-1 所 示 。 图 4-1 简单 的 表单 


六 4.1.2 表单 的 基本 结构 < 


表单 是 一 个 包含 表单 元 素 的 区 域 ， 在 网 页 中 负责 数据 采集 功 
能 。 一 个 表单 由 3 个 部 分 组 成 ， 分 别 是 表单 元 素 、 表 单 域 和 表单 
按钮 。 下 
。 表单 元 素 : 这 里 包含 了 处 理 表单 数据 所 用 CGI 程序 的 URL 全 , 
及 数据 提交 到 服务 器 的 方法 。 i = 
。 表单 域 ， 包 含 了 文本 框 、 密 码 框 、 多 行文 本 框 、 隐 藏 域 、 bie 
复 选 杠 、 单 选 按钮 以 及 下 拉 列 表 框 和 文件 上 传 框 等 。 Fnsm 
。 表单 按钮 ， 包 含 提交 按钮 、 取 消 按钮 和 重 置 按钮 等 ， 用 于 wm 让 人 
将 数据 传送 到 服务 器 上 或 者 取消 输入 还 可 以 用 表单 按钮 
控制 其 他 定义 了 处 理 脚本 的 工作 。 
如 图 4-2 所 示 为 一 个 移动 网 页 的 注册 页 面 , 里 面包 含 了 表单 元 
素 、 表 单 域 以 及 表单 按钮 三 部 分 。 图 4-2 注册 页 面 




































































4.2 ”新 增 表单 元 素 


HTML 5 新 增 了 3 个 表单 元 素 , 分 别 是 <datalist> 元 素 、<keygen> 元 素 、<output> 元 素 。 下 面 分 别 进行 介绍 。 








全 4.2.1 <datalist> 元 素 


<datalist> 元 素 规定 了 <input> 元 素 可 能 的 选项 列表 ， 其 被 用 来 为 <input> 元 素 提供 “自动 完成 ”的 特性 。 
户 能 看 到 一 个 下 拉 列 表 , 里 边 的 选项 是 预先 定义 好 的 , 将 作为 用 户 的 输入 数据 。 一 般 情况 下 , 使 用 <input> 
元 素 的 list 属性 来 绑 定 <datalist> 元 素 。 

【 例 4-2】〔 实 例文 件 ，ch04\Chap4.2.html》<datalis> 元 素 的 应 用 。 代 码 如 下 : 
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第 圆 章 使 用 HTML 5 设计 移动 页 面 表单 


<!DOCTYPE html> 
<html> 
<head> 
<title><datalist> 元 素 的 应 用 </title> 
</head> 
<body> 
<input list="browsers" name="browser"> 
<datalist id="browsers"> 
<option value="Internet Explorer"> 
<option value="Firefox"> 
<option value= 
<option value="Opera"> 
<option value="Safari"> 
</datalist> 
<input type="submit"> 
</form> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap4.2.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-3 所 示 。 
单 击 文本 框 ， 即 可 在 弹出 的 下 拉 列 表 中 选择 表单 详细 信息 ， 如 图 4-4 所 示 。 


<datalist> 元素 的 应 ”X <datalist> 元素 的 应 X 














CG © filey//C/Users/qiangt 四 GC © fleV//CVUsersqiangt 
次 最 第 访问 “ 国 火 贩 官方 站 点 而 新手 上 路 。 》》 口 移动 本 书生 次 最 第 访问 国 火 殊 计 方 站 点 异 新 手 上 路 。 》》 口 移动 版 答 


提交 查询 提交 查询 





Internet Explorer 
Firefox 


Chrome 
Opera BR 
Safari 











4-3 应 用 <datalist> 元 素 后 的 运行 结果 4-4 ”表单 详细 信息 


4.2.2 ”<keygen> 元 素 





<keygen> 元 素 的 作用 是 提供 一 种 验证 用 户 的 可 靠 方法 ， 当 提交 表单 时 ， 会 生成 两 个 键 ， 一 个 是 私 钥 ， 
一 个 公 钥 。 私 钥 (private key) 存储 于 客户 端 ， 公 和 钥 (public key) 则 被 发 送 到 服务 器 。 公 钥 可 用 于 之 后 验证 
用 户 的 客户 端 证 书 (client certificate )。 

【 例 4-3】〔 实 例文 件 ，ch04\Chap4.3.html)〉<keygen> 元 素 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title><keygen> 元 素 的 应 用 </title> 

</head> 

<body> 

<form action="demo_ keygen.php" method="get"> 
用 户 名 :<input type="text" name="usr name"> 
加 密 :<keygen name="security"> 
<input type="submit"> 

</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.3.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-5 所 示 。 
在 “用 户 名 ”文本 框 中 输入 用 户 名 ， 并 单 击 “ 加 密 ” 右 侧 的 下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 加 密 
的 方式 ， 如 图 4-6 所 示 。 

































































057 








/FN 


\ 


HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 
NA 


<output> 元 素 中 。 


tel、 








© © file///C/Users/qiangt “党 | 二 © © filey///C/Users/qiangt “i 
次 最 军 访 问 国 火狐 官方 站 点 六 新 手 上 路 六 口 移动 版 书签 次 最 是 访问 ” 国 火狐 言 方 站 点 者 新 手 上 路 六 口 移动 版 书签 
用 户 名 :| | 加密: | 高 受 “| | 提交 查询 用 户 名 : | 梦 月 











图 4-5 应 用 <keygen> 元 素 后 的 运行 结果 图 4-6 选择 加 密 方式 


4.2.3 ”<output> 元 素 








<output> 元 素 用 于 不 同类 型 的 输出 ， 如 计算 或 脚本 输出 。 下 面 给 出 一 个 实例 ， 将 计算 的 结果 显示 在 
































【 例 4-4】 〈 实 例文 件 ，ch04\Chap4.4.html) <output> 元 素 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title><output> 元 素 的 应 用 </title> 

</head> 

<body> 

<form oninput="x.value=parseInt (a.value)+parseInt (b.value) ">0 
<input type="range" id="a" value="50">100 
+<input type="number" id="b" value="50"> 
=<output name="x" for="a b"></output> 
</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.4.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-7 所 示 。 
移动 页 面 中 的 滑 块 ， 即 可 在 右 侧 显示 计算 结果 ， 如 图 4-8 所 示 。 





























<output> 元素 的 应 用 <output> 元 各 应 月 

| G | © fileyV//CVUseryqiangu/r .全 | 力 | 和 所 GO fileW/CVyUsersyqiangu/ 心 客 | 为 | 轨 

| 妆 最 各 访问 国光 吉方 站 记念 新手 上 路 因 基 用 网 站 。 阔 口 移动 和 次 最 归 沪 可 六 的 吉方 波 训 加 新手 上 笋 名 和 用 网 址 。 》》 口 闪 动 所 答 

0 日 i100+l50 闫 = 0 io 相国 -149 
4-7 ”应 用 <output> 元 素 后 的 运行 结果 4-8 ”移动 滑 块 显示 计算 结果 


4.3 ”表单 的 输入 类 型 


HTML 5 拥有 多 个 新 的 表单 输入 类 型 ， 它 们 提供 了 更 好 的 输入 控制 和 验证 。 常 用 的 输入 类 型 包括 url、 


cdor、email、range 等 。 











4.3.1 url 类 型 











Url 类 型 是 





F 说 明 网 站 网 址 的 。 显 示 为 一 个 文本 字段 输入 URL 地 址 。 在 提交 表单 时 ， 会 自动 验证 url 














的 值 。 代 码 格式 如 下 : 
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<input type="url" name="userurl"/> 

另外 ， 用 户 可 以 使 用 普通 属性 设置 url 输入 框 ， 例 如 可 以 使 用 max 属性 设置 其 最 大 值 ， 用 min 属性 设 
置 其 最 小 值 ， 用 step 属性 设置 合法 的 数字 间隔 ， 利 用 value 属性 规定 其 默认 值 。 

【 例 4-5】 实例 文件 ，ch04\Chap4.5.html》url 类 型 的 应 用 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<title>url 类 型 元 素 </title> 

</head> 

<body> 

<form> 

<br/> 

请 输入 网 址 : 

<input type="url" name="userurl"/> 

</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.5.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-9 所 示 ， 用 户 即 可 输 
入 相应 的 网 址 。 

如 果 输 入 的 不 是 完整 的 URL 网 址 格式 ， 表 单 将 会 显示 粉红 色 边 框 。 需 要 注意 的 是 ， 完 整 的 URL 格式 
必须 要 以 “http://” 开 头 ， 如 图 4-10 所 示 。 









































































































































€ 3 CD fle/c/sers/qiangu 全» 二 和 © © mey//c/Users/qlangu 站» 
次 最 名店 问 国 火 吕方 站 可 绚 亲 于 上 路 国 条 用 网 址 ”》》 口 移动 所 答 仇 最 时 访问 国 火 用 页 太 站 点 ”和 新 手 上 路 “四 第 用 网 站 》》 口 移动 下 
请 给 入 网 址 : [htpV/nwwbaiducon| | 请 输入 网 址 : 
图 4-9 应 用 url 类 型 后 的 运行 结果 4-10 完整 的 URL 格式 
4.3.2 tel 类 型 





tel 类 型 的 input 元 素 被 设计 为 用 来 输入 电话 号 码 的 专用 文本 框 。 它 没有 特殊 的 校 验 规则 ， 不 强制 输入 
数字 〈 因 为 许多 电话 号 码 通常 带 有 其 他 文字 )， 和 譬如 010-66870831。 但 是 开发 者 可 以 通过 pattern 属性 来 制 
定 对 于 输入 的 电话 号 码 格式 的 验证 ， 其 代码 格式 如 下 : 

<input type="tel" name="tell" /> 

【 例 4-6】 实例 文件 ，ch04\Chap4.6.html)》tel 类 型 的 应 用 。 代 码 如 下 : 

<!DOCTYPE HTML> 

<html> 

<head> 

<title>tel 类 型 元 素 </title> 

</head> 

<body> 

<form > 

<input type="tel" name="tell”" pattern="010-66688899" /> 

<input type="submit" /> 

</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.6.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-11 所 示 。 
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在 文本 框 中 输入 不 满足 pattern 属性 强制 规则 的 号 码 格式 ， 单 击 “ 提 交 查 询 ” 按 钮 后 会 弹出 错误 提示 ， 
如 图 4-12 所 示 。 
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= er | | 
图 4-11 应 用 tel 类 型 后 的 运行 结果 图 4-12 错误 提示 














color 类 型 的 input 元 素 用 来 选取 颜色 ， 它 提供 了 一 个 颜色 选取 器 。 代 码 如 下 : 
<input type="color" name="tell" /> 
【 例 4-7】〔 实 例文 件 ，ch04\Chap4.7.html》color 类 型 的 应 用 。 代 码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<head> 

<title>color 类 型 元 素 </title> 
</head> 

<body> 

<form > 

<input type="color" name="tell" /> 
<input type="submit" /> 
</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.7.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-13 所 示 。 
单 击 颜色 色 块 ， 即 可 弹出 “颜色 ”对 话 框 ， 在 其 中 选择 需要 的 颜色 ， 如 图 4-14 所 示 。 
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图 4-13 应 用 color 类 型 后 的 运行 结果 图 4-14 选择 需要 的 颜色 





:4.3.4 email 类 型 


与 url 类 型 类 似 ，email 类 型 用 于 让 浏览 者 输入 E-mail 地 址 。 在 提交 表单 时 ,会 自动 验证 email 域 的 值 。 
代码 如 下 : 


<input type="email" name="user email"/> 
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【 例 4-8】 实例 文件 ，ch04\Chap4.8.html〉email 类 型 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>E-mail 类 型 元 素 </title> 
</head> 

<body> 

<form> 

<br/> 

请 输入 您 的 邮箱 地 址 : 

<input type="email" name="user email"/> 
<br> 

<input type="submit” value=" 提 交 "> 
</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.8.html 文件 , 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-15 所 示 , 用 户 即 可 输 
入 相应 的 邮箱 地 址 。 
如 果 用 户 输入 的 邮箱 地 址 不 合法 ， 单 击 “ 提 交 ” 按 钮 后 会 弹出 提示 信息 ， 如 图 4-16 所 示 。 


















































所 ) CO meyycyus 人» 和 €) 3 Ge fle//cs 个 |》 和 
次 最 第 访问 四 火 折 寺 方 站 点 -和 亲 手 上 路 》》” 曲 种 动 乒 书 和 并 最 这 问 国 XI 下 方 尖 点 创新 手 上 路 。》 口 移 芭 书生 
| 请 输入 您 的 邮箱 地 址 : | 请 输入 您 的 邮 御 lt 直 : mef， ] 
提交 提交 
诗 给 和 电子 好 他 址 【| 
4-15 应 用 E-mail 类 型 后 的 运行 结果 图 4-16 提示 信息 


4.3.5 range 类 型 


Range 类 型 是 显示 一 个 滚动 的 控件 ， 与 number 类 型 一 样 ， 用 户 可 以 使 用 max、min 和 step 属性 控制 控 
件 的 范围 。 代 码 如 下 : 

<input type="range" name=' 

其 中 ，min 和 max 分 别 控制 滚动 控件 的 最 小 值 和 最 大 值 。 

【 例 4-9】 (〈 实 例文 件 : ch04\Chap4.9.html) range 类 型 的 应 用 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<title>range 类 型 元 素 </title> 

</head> 

<body> 

<form> 

<br/> 

技能 考核 我 的 成 绩 名 次 为 : 

<input type="range" name="ran" min="]1" max="]10" /> 

</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.9.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-17 所 示 。 
户 可 以 拖 动 滑 块 ， 从 而 选择 合适 的 数字 来 显示 成 绩 的 名 次 ， 如 图 4-18 所 示 。 

















"" min="" max="" /> 
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< GC © fle///C/Useryqiangt 会 六 Ey 所 © © fleVW/CVyUserwyqiangt 从 为 EE 
次 最 党 六 问 国 火 弛 证 方 站 点 加 新 手 上 路 » Ds 和 次 最 过 全 加 火 M 祈 方 站 点 区 新 手 上 路 »》 Olis 答 
技能 考核 我 的 成 绩 名 次 为 : 时 技能 考核 我 的 成 绩 名 次 为 : 时 

图 4-17 应 用 range 类 型 后 的 运行 结果 图 4-18 拖 动 滑 块 


提示 : 默认 情况 下 ， 滑 块 位 于 滚珠 的 中 间 位 置 。 如 果 用 户 指定 的 最 大 值 小 于 最 小 值 ， 则 允许 使 用 反 向 
滚动 轴 ， 目 前 浏览 器 还 不 能 很 好 地 支持 这 一 属性 。 


4.3.6 ”search 类 型 
search 类 型 的 input 元 素 是 一 种 专门 用 来 输入 搜索 关键 词 的 文本 框 。 代 码 如 下 : 


<input type="search" name="searchl" /> 


【 例 4-10】 《实例 文件 ， ch04\Chap4.10.html) search 类 型 的 应 用 。 代 码 如 下 : 
<!DOCTYPE HTML> 

<html> 

<head> 

<title>search 类 型 元 素 </title> 

</head> 


<body> 
<form > search 关 型 元 素 


<input type="search" name="user search" /> Ee Ga 
<input type="submit" /> 
</form> 

</body> | | 提交 查 记 
</html> 

相关 的 代码 实例 可 参考 Chap4.10.html 文件 , 在 Firefox 浏览 


器 中 运行 的 结果 如 图 4-19 所 示 。 4-19 search 类 型 的 应 用 


4.3.7 number 类 型 


number 类 型 提供 了 一 个 输入 数字 的 输入 类 型 。 用 户 可 以 直接 输入 数字 ， 或 者 通过 单 击 微调 框 中 的 向 上 
或 向 下 按钮 选择 数字 。 代 码 如 下 : 

<input type="number" name="shuzi" /> 

【 例 4-11】 实例 文件 ，ch04\Chap4.11.html〉number 类 型 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>number 类 型 元 素 </title> 
</head> 

<body> 

<form> 

<br/> 

最 近 一 周 浏览 此 网 页 

<input type="number” name="shuzi "/> 次 了 哦 ! 
</form> 

</body> 

</html> 


© filey//C/Users/qiar 
次 最 党 访问 国 火狐 官方 站 点 者 新 手 上 路 
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相关 的 代码 实例 可 参考 Chap4.11.html 文件 ， 在 Firefox 浏览 
器 中 运行 的 结果 如 图 4-20 所 示 。 用 户 可 以 直接 输入 数字 ,也 可 以 € > CO ieser/qeng 全 为 二 
调 按 钮 选择 合适 的 数字 。 次 最 皖 访 问 ”四 火 地 言 方 站 点 力 新 手 上 :路 »》 “Da 等 

注意 : 建议 用 户 使 用 min 和 max 属性 规定 输入 的 最 小 值 和 最 十 近 同济 临 此 网 页 T 向 次 7 了 吻 ! 
大 值 。 
































图 4-20 应 用 number 类 型 后 的 运行 结果 






4.3.8 datepickers 类 型 


加 
datepickers 类 型 是 指 日 期 类 型 ，HTML 5 中 提供 了 多 个 可 供 选择 日 期 和 时 间 的 新 输入 类 型 ， 用 于 验证 输 
入 的 日 期 与 时 间 ， 表 4-1 为 HIML 5 中 新 增 的 日 期 和 时 间 输 入 类 型 。 


表 4-1 HTML 5 新 增 日 期 和 时 间 输 入 类 型 

















日 期 和 时 间 类 型 描述 

Date 人 允许 用 户 从 日 期 选择 器 选择 一 个 日 期 

month 允许 用 户 选 择 一 个 月 份 

week 允许 用 户 选 择 周 和 年 

time 允许 用 户 选 择 一 个 时 间 

datetime 允许 用 户 选 择 一 个 日 期 (UTC 时 间 ) 

datetime-local 允许 用 户 选择 一 个 日 期 和 时 间 (无 时 区 ) 
1. Date 类 型 元 素 


在 HTML 5 中 ， 新 增 了 日 期 输入 类 型 date， 其 含义 为 选择 日 、 月 、 年 。date 属性 的 代码 如 下 : 
<input type="date" name="user date" /> 

【 例 4-12】 实例 文件 ，ch04\Chap4.12.html》Data 类 型 的 应 用 。 代 码 如 下 : 
<!DOCTYPE html> 

<html> 

<head> 

<title>Date 类 型 元 素 </title> 

</head> 

<body> 

<form> 

<br/> 

请 选择 购买 商品 的 日 期 : 

<br> 

<input type="date" name="user date" /> 

</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.12.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-21 所 示 。 
单 击 日 期 输入 框 ， 即 可 在 弹出 的 日 期 选取 框 中 选择 需要 的 日 期 ， 如 图 4-22 所 示 。 


2. time 类 型 元 素 
在 HIML 5 中 ， 新 增 了 时 间 输 入 类 型 tme， 其 含义 为 选取 时 间 〈 小 时 和 分 钟 )。time 属性 的 代码 格式 如 下 : 


<input type="time" name="user date" /> 








趟 
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< 全» 
次 好 号 态 同 国 火狐 官方 站 点 碟 新 手 上 路 信 。 口 移动 版 书 罕 





光纤 也 吉 和 的 日 
=/ 国 





2017 年 1 月 > 


Date 尖 型 元 素 同居 





所 CG © filey//C/Users/qiar 
净 最 是 访问 国 火 多 官方 尖 训 加 新 手 上 路 


请 选择 购买 商品 的 日 期 : RS 


[rs /m/e 




















图 4-21 应 用 Data 类 型 后 的 运行 结果 图 4-22 选择 需要 的 日 期 
【 例 4-13】〔 实 例文 件 ，ch04\Chap4.13.html》time 类 型 的 应 用 。 代 码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<head> 

<title>time 类 型 元 来 </title> 
</head> 

<body> 

<form> 

Time:<input type="time" name="user date" /> 
<input type="submit" /> 
</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.13.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-23 所 示 。 
户 可 以 在 表单 中 输入 标准 的 time 格式 ， 然 后 单 击 “提交 查询 ”按钮 ， 如 图 4-24 所 示 。 
































© © file///c/Users/qiang “为 € 3 CG © file///C/Users/qiang. 


.9 
次 最 党 访问 国 | 火 用 寺 方 站 点 加 新 手 上 路 。 为 口 移动 版 书签 次 最 逢 访问 国 ] 火 孤 计 方 站 点 厂 新手 [ 路 为 口 


Time:| 一 一 : 一 “|] | 提交 喜 询 Time: [-- 07 : 国 @ | | 提交 站 癌 











4-23 ”应 用 time 类 型 后 的 运行 结果 4-24 ”输入 标准 的 time 格式 


3. month 类 型 元 素 

在 HIML 5 中 ， 新 增 了 日 期 输入 类 型 month， 其 含义 为 选取 月 、 
<input type="month" name="user date" /> 

【 例 4-14】 实例 文件 ，ch04\Chap4.14.html》month 类 型 的 应 用 。 代 码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<head> 

<title>month 类 型 元 素 </title> 

</head> 

<body> 

<form> 

Month:<input type="month" name="user date" /> 
<input type="submit" /> 


FEF。month 属性 的 代码 格式 如 下 : 


上 
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</form> 
</body> 
</html> 
相关 的 代码 实例 可 参考 Chap4.14.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-25 所 示 。 


用 户 可 以 在 表单 中 输入 标准 的 month 格式 ， 然 后 单 击 “ 提 交 查 询 ” 按 钮 ， 如 图 4-26 所 示 。 
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< © © file///c/Users/qian "» 多 GG © fley//c/Users/qiar » 
兴 晤 回国 XIE 方 波 本 亲手 上 器。”》 和 版 世 和 疼 最 8 问 国有 全 新 上 策略 
Month: 提交 章光 Month: ES 提交 覃 襄 

4-25 ”应 用 month 类 型 后 的 运行 结果 4-26 用 户 在 表单 中 输入 标准 的 month 格式 


4. datetime 类 型 元 素 
在 HIML 5 中 ， 新 增 了 时 间 输 入 类 型 datetime， 其 含义 为 选取 时 间 、 日 、 月 、 年 (UTC 时 间 )。UTC 
是 协调 世界 时 ， 又 称 世 界 统一 时 间 、 世 界 标准 时 间 、 国 际 协 调 时 间 。 由 于 中 国 采 用 的 是 第 8 时 区 的 时 间 ， 
所 以 中 国 及 其 他 亚洲 国家 大 都 会 采用 UTC+8 的 时 间 。datetime 属性 的 代码 格式 如 下 ; 
<input type="datetime" name="user date" /> 
【 例 4-15】〔 实 例文 件 ，ch04\Chap4.15.html》datetime 类 型 的 应 用 。 代 码 如 
<!DOCTYPE HTML> 
<html> 
<head> 
<title>datetime 类 型 元 来 </title> 
</head> 
<body> 
<form> 
日 期 和 时 间 :<input type="datetime”" name="user date”" /> 
<input type="submit" /> 
</form> 
</body> 
</html> 
相关 的 代码 实例 可 参考 Chap4.15.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-27 所 示 。 
用户 在 表单 中 输入 标准 的 datetime 格式 ， 然 后 单 击 “ 提 交 查 询 ” 按 钮 ， 如 图 4-28 所 示 。 
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图 4-27 应 用 datetime 类 型 后 的 运行 结果 4-28 ”输入 标准 的 datetime 格式 

5. datetime-local 类 型 元 素 

在 HTML 5 中 ， 新 增 了 时 间 输 入 类 型 datetime-local， 其 含义 为 选取 时 间 、 日 、 月、 年 (本 地 时 间 )。 例 
如 ， 中 国 使 用 的 datetime-local 就 是 第 8 时 区 的 时 间 。datetime-local 属性 的 代码 如 下 : 

<input type-"datetime-local" name-"user daten /> 


【 例 4-16】〔 实 例文 件 ，ch04\Chap4.16.html》datetime-local 类 型 的 应 用 。 代 码 如 下 : 























<!DOCTYPE HTML> 


065 





一 


HfML 5 从 入 门 到 项 目 实践 ( 超 信 版 ) 
NY 


<html> 

<head> 

<title>datetime-local 类 型 元 素 </title> 
</head> 

<body> 

<form > 


日 期 和 时 间 :<input type="datetime-local" name="user date" /> 


<input type="submit”" /> 
</form> 
</body> 
</html> 











相关 的 代码 实例 可 参考 Chap4.16.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-29 所 示 。 用 户 可 以 


在 表单 中 输入 标准 的 datetime-local 格式 。 
6. week 类 型 元 素 





在 HTML 5 中 ， 新 增 了 日 期 输入 类 型 week， 其 含义 为 选取 周 和 年 。week 属性 的 代码 格式 如 1 


<input type="week" name="user date" /> 























7 了 | 


【 例 4-17】 《实例 文件 :ch04\Chap4.17.html) week 类 型 的 应 用 。 代 码 如 下 : 


<!DOCTYPE HTML> 

<html> 

<head> 

<title>week 类 型 元 素 </title> 
</head> 

<body> 

<form> 

星期 :<input type="week" name="user _ date" 
<input type="submit" /> 
</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.17.html 文件 ， 
在 表单 中 输入 标准 的 week 格式 。 
园 dototime locaB 7 xX 


© © localho: 下 国富 | 少 | = 


日 期 和 时 间 : [2020/10/10 10:00 | | 扣 交 得 语 





4-29 ”输入 标准 的 datetime-local 格式 


A> 








在 Firefox 浏览 器 中 运行 的 结果 如 图 4-30 所 示 。 用 户 可 以 





星期: 2020 年 第 10 周 。 || 囊 交 章 启 


weekak 元 素 


GO Iloalho: oh 














4-30 ”输入 标准 的 week 格式 


4.4 表单 的 属性 


HTML 5 中 新 增 了 一 系列 与 表单 有 关 的 属性 , 本 节 将 介绍 HIML 5 中 新 增 的 属性 , 首先 介绍 表单 的 新 


访 





属性 ， 然 后 介绍 与 表单 的 input 元 素 有 关 的 新 增 


4 4.1 <form> 新 属性 











属性 。 








表单 属性 就 是 与 form 元 素 有 关 的 属性 ，HIML 5 中 新 增 的 与 表 生 
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属性 有 两 个 ， 如 表 4-2 所 示 。 


第 贺 章 使 用 HTML 5 设计 移动 页 面 表单 


表 4-2 新 增 <form> 属 性 





描 述 
规定 是 否 启 用 表单 的 自动 完成 功能 
如 果 使 用 该 属性 ， 则 提交 表单 时 不 进行 验证 


属性 名 称 


autocomplete 








novalidate 





1. autocomplete 属性 

autocomplete 属性 的 值 包括 on 和 off， 如 果 将 属性 值 指定 为 on， 那 么 表示 执行 自动 完成 功能 ， 如 果 将 
属性 值 指定 为 off， 那 么 表示 关闭 自动 完成 功能 。 

【 例 4-18】 《实例 文件 ， ch04\Chap4.18.html) autocomplete 属性 的 应 用 。 代 码 如 下 : 

















<!DOCTYPE html> 

<html> 

<head> 

<title>autocomplete 属性 </title> 

</head> 

<body> 

<form id="formOone" autocomplete="on"> 
用 户 名 称 :<input type="text" name="name"><br> 
用 户 昵称 :<input type="text" name="name"><br> 
邮件 地 址 :<input type="email" name="email" autocomplete="off"><br> 
<input type="submit"> 

</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.18.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-31 所 示 。 
根据 页 面 提示 在 文本 框 中 输入 相关 信息 ， 如 图 4-32 所 示 。 


autocomplete 尾 性。 XX 





autocomplete 旦 性 


€¢)3 CG © fil/cUser/qang  … » 三 € © © flel/c/Useryqiang  … » 三 
次 景 常 沪 问 国 火 如 言 方 站 点 莉 新 手 上 路 冰 5 移动 版 书生 次 最 过 访问 国 火狐 言 方 站 点 芒 新 手 上 路 交口 移动 版 书 答 
用 记名 隐 . 用 户 名 各 | | 
用 户 昵称 : | 用 户 昵称 :心地 注 洗 | 

邮件 地 址 : | 邮件 地 址 :mi@163.com | 

提交 查询 性 提交 查询 v 








应 用 autocomplete 属性 后 的 运行 结果 图 4-32 在 文本 框 中 输入 信息 


次 想 要 输入 信息 时 , 就 会 


图 4-31 
删除 输入 的 信息 , 当 








二 























自动 显示 上 次 输入 的 信息 ， 如 图 4-33 所 示 。 


示 - © Ofile/cUser/qiang * » 三 
提示 : autocomplete 属性 不 仅 可 以 用 于 <form> 元 闪 是 党 六 月 国 火 儿 言 方 站 点 万 新 手 上 路 。。 》 0 移动 答 
素 ， 还 可 以 用 于 所 有 类 型 的 <input> 元 素 。 | 
用 户 昵称 : 于 性 
i 邮件 地 址 : | 
2. novalidate 属性 l 

















novalidate 属性 是 一 个 boolean (布尔 ) 属性 ， 其 
规定 在 提交 表单 时 不 验证 form 或 input 域 。 
【 例 4-19】〔 实 例文 件 ，ch04\Chap4.19.html》novalidate 属性 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>novalidate 属性 的 应 用 </title> 


图 4-33 显示 上 次 输入 的 信息 
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</head> 

<body> 

<form action="demo-form.php”novalidate> 
邮件 地 址 :<input type="email" name="user email"> 
<input type="submit"> 

</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.19 html 文件 , 在 Firefox 
浏览 器 中 运行 的 结果 如 图 4-34 所 示 。 这 样 在 提交 查询 时 ， 汪 

一 攻 ©® file:///C:/Users/qian 0. 三 
不 会 验证 输入 的 表单 元 素 是 否 符合 要 求 ， 而 是 直接 提交 给 | sono ee 全 


服务 器 。 邮件 地 直上] 到 


4.4.2 <input> 
put> 新 属性 图 4-34 应 用 novalidate 属性 后 的 运行 结果 


HTML 5 中 新 增 了 一 系列 与 <input> 元 素 有 关 的 属性 , 为 <input> 元 素 指定 这 些 属 性 可 以 实现 不 同 的 功能 。 
表 4-3 为 HTML 5 新 增 的 <input> 属 性 。 






































表 4-3 HTML 5 新 增 的 <input> 属 性 



































属 性 名 说 明 
autocomplete 规定 <input> 元 素 输入 字段 是 否 应 该 启用 自动 完成 功能 
autofocus 规定 当 页 面 加 载 时 <input> 元 素 应 该 自动 获得 焦点 
form 规定 <input> 元 素 所 属 的 一 个 或 多 个 表单 
formaction 规定 当 表单 提交 时 处 理 输 入 控件 的 文件 的 URL (只 针对 type="submit" 和 type="image") 
formenctype 规定 当 表单 数据 提交 到 服务 器 时 如 何 编码 (只 适合 ype="submit" 和 type="image") 
formmethod 定义 发 送 表单 数据 到 action URL 的 HTTP 方法 (只 适合 type="submit" 和 type="image") 
formnovalidate 盖 <form> 元 素 的 novalidate 属性 
formtarget 规定 表示 提交 表单 后 在 哪里 显示 接收 到 响应 的 名 称 或 关键 词 (只 适合 type="submit" 和 type="image") 
height 规定 <input> 元 素 的 高 度 〈 只 针对 type="image") 
width 规定 <input> 元 素 的 宽度 (只 针对 type="image") 
list 引用 <datalist> 元 素 ， 其 中 包含 <input> 元 素 的 预定 义 选项 
min 规定 <input> 元 素 的 最 小 值 
max 规定 <input> 元 素 的 最 大 值 
multiple 规定 允许 用 户 输入 到 <input> 元 素 的 多 个 值 
pattern 规定 用 于 验证 <input> 元 素 的 值 的 正则 表达 式 
placeholder 规定 可 描述 输入 <input> 字 段 预期 值 的 简短 的 提示 信息 
required 规定 必须 在 提交 表单 之 前 填写 输入 字段 
step 规定 <input> 元 素 的 合法 数字 间隔 









































在 新 增 的 <input> 属 性 中 ， 一 些 属性 在 前 面 已 经 介绍 并 使 用 过 ， 如 autocomplete 属性 等 ， 下 面 再 来 介绍 
几 种 常用 的 属性 。 
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1. autofocus 属性 
autofocus 属性 指定 页 面 加 载 后 是 否 自 动 获取 焦点 ， 一 个 页 面 上 只 能 有 一 个 元 素 指定 autofocus 属性 。 
































autofocus 属性 适用 于 所 有 类 型 的 <input> 标 记 ， 该 属性 的 值 是 布尔 值 ， 将 标记 的 属性 值 指定 为 tue 时 ， 表 示 


页 


览 器 中 运行 的 结果 如 图 4-35 所 示 。 页面 的 焦点 自 定位 在 “用 户 
名 ”文本 框 中 。 


的 值 , pattern 属性 适用 于 text search url, tel、 email 和 password 











加 载 完毕 后 会 自动 获取 该 焦点 。 











【 例 4-20】【〔 实 例文 件 ，ch04\Chap4.20.html》autofocus 属性 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>autofocus 属性 </title> 

</head> 

<body> 

<form> 
用 户 名 :<input type="text" name="name" autofocus><br> 
昵称 :<input type="text" name="niche"><br> 
<input type="submit"> 

</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.20.html 文件 ， 在 Firefox 浏 
































© © file///C/Users/qiar 
交 最 守 访 问 国 火狐 官方 站 点 万 新 手 上 路 » 





2. pattern 属性 oe | 


patterm 属性 描述 了 一 个 正则 表达 式 用 于 验证 <input> 元 素 提交 查询 











等 元 素 类 型 4-35 应 用 autofocus 属性 后 的 运行 结果 


【 例 4-21】 “实例 文件 ，ch04\Chap4.21.html) pattern 属性 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>pattern 属性 </title> 

<style> 

#rgbaLl { 
width:300px; 
height:200px; 
font-size:14px; 
color:#000; 
margin-left:20px; 





} 
</style> 
</head> 
<body> 
<form action="#" method="get"> 
<table align="center" width="100%"> 
<tr> 
<td align="right" width="20%"> 姓 名 :</td> 
<td><input type="text" name="username" pattern="^[\u4e00-\u9fa5\uf900-\ufa2d] {1,11}$" /> 
( 汉字, 只 能 包含 中 文字 符 (长度 大 于 2 小 于 12) ) </td> 
</tr> 
<tr> 
<td align="right">QQ 号 码 :</td> 
<td><input type="text" name="myqq" pattern="^[1-9] [0-9]{4,}5" /> 
(QQ 号 从 152000 开始) </td> 
</tr> 
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<tr> 
<td align="right"> 固 定 电话 :</td> 
<td><input type="tel" name="mytel" pattern="\d{3}-\d{8}1\d{4}-\d{7}"/> 
(国内 电话 号 码 (0855-12545X xXx、010-878545X XxX) ) </td> 
</tr> 
EE 
<td align="right"> 手 机 号 码 :</td> 
<td><input type="text”name="myphone”Ppattern="^(13[0-9]114[517]115[01112131516171819] 
118[01112131516171819])\d{8}$"/> 
(以 13、17、15、18 开头 的 电话 号 码 ) </td> 
</tr> 
<tr> 
<td align="right"> 身 份 证 号 :</td> 
<td><input type="text" name="mycard" pattern="^\d{15}1\d{18}$"/> 








(15 位 或 18 位 身份 证 号 ) </td> 
</Er> 
La 
<td></td><td><input type="submit” value=" 提 交 ”/></td> 
</tr> 
</table> 
</form> 
</body> 
</html> 
相关 的 代码 实例 可 参考 Chap4.21.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-36 所 示 。 
pattern 属 性 
G 会 D fileV//CYUsersyqianguwDocuments/ 源 码 /Chal 
说 最 军 态 问 国 ] 火狐 言 方 站 点 医 新 手 上 化 加 各 用 网 址 园 京东 丙 城 甩 沟 全 双 12 口 巷 IE 书 答 
姓名 : (汉字 ， 只 能 包含 中文 字符 ( 长 度 大 于 2 小 于 12) ) 
QQs 码 : (QQ 号 从 152000 开 始 ) 
固定 电话 : (国内 电话 号 码 (0855-12545< <、010-878545x*) ) 
手机 号 码 : (以 13、17、15、18 开 头 的 电话 号 码 ) 
身份 证 号 : (15 位 或 18 位 身份 证 号 ) 
提交 
4-36 应 用 pattern 属性 后 的 运行 结果 
3. multiple 属性 


multiple 属性 指定 输入 框 可 以 选择 多 个 值 ， 该 属性 适用 于 email 和 file 类 型 的 <input> 标 签 。mnultiple 属 
性 用 于 email 类 型 的 <input> 标 记 时 ， 表 示 可 以 向 文本 框 中 输入 多 个 E-mail 地 址 ， 多 个 地 址 之 间 通 过 逗号 进 
行 分 隔 ， mnultiple 属性 用 于 file 类 型 的 <input> 标 记 时 ， 表 示 可 以 选择 多 个 文件 。 

【 例 4-22】 (实例 文件 :ch04\Chap4.22 .html) mnultiple 属性 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>multiple 属性 </title> 

<style> 

#rgbaLl { 
width:300px; 
height:200px; 
font-size:14px; 
color:#000; 
margin-left:20px; 

, 

</style> 

</head> 

<body> 
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<div id="smiddle"> 
<article> <br/> 
<form id="formone"> 
电子 邮箱 :<input type="email"” name="myemail"” multiple="true"/>&nbsp; &nbsp; (如 果 电子 邮箱 有 多 
个 ,请 使 用 逗号 进行 分 隔 ) <br/><br/> 
上 传 照 片 :<input type="file" name="selfile" multiple /><br/><br/> 
<input type="submit"” value=" 提 交 ” /> 
</form> 
</article> 
</div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap4.22.html 文 件 ,在 Firefox 
浏览 器 中 运行 的 结果 如 图 4-37 所 示 。 在 “电子 邮件 ”文本 eC cnmn 人 下 
Ph 输入 需要 的 邮件 地 址 ， 然 后 根据 需要 单 击 “ 浏 览 ” 按 | 9 ao 和 Xames 革 ts 四 sem > Dwiewe 





























框 二 
钮 ， 在 打开 的 “文件 上 传 ” 对 话 框 中 选择 多 个 需要 上 传 的 | 《如果 电 子 地 入 用 个 ， 请 全 用 到 进入 陋 ) 
hs 上 传 照片 :[ 通 总 -| 已 和 2 个 文件 

4. required 属性 Nx | | 





如 果 开 发 者 要 求 某 个 输入 框 的 内 容 必须 填写 ,就 可 以 。。 图 4.37 应 用 multiple 属性 后 的 运行 结果 


为 <input> 标 记 指定 required 属性 ， 其 适用 于 text、search、url、telephone、email、password、datepickers、 
number、checkbox、radio 及 file 类 型 的 <input> 元 素 。 
【 例 4-23】 实例 文件 ，ch04\Chap4.23.html》required 属性 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title>required 属性 </title> 

<style> 

#rgbaLl { 
width:300px; 
height:200px; 
font-size:14px; 
color:#000; 
margin-left:20px; 














有 
</style> 
</head> 
<body> 
<div id="smiddle"> 
<article> 
<form action="#" method="get"> 
<table align="center" width="100%"> 
<tr> 
<td align="right” width="20%"> 姓 名 :</td> 
<td><input type="text" name="username" pattern="^[\u4e00-\u9fa5\uf900-\ufa2d] {1,11}$" 
placeholder=" 例 如 :小 雨 或 王 天 琦 " required /> 
(汉字 ,只 能 包含 中 文字 符 ( 长 度 大 于 2 且 小 于 12) ) </td> 
</tr> 
EE 
<td align="right">QQ 号 码 :</td> 
<td><input type="text" name="myqq" pattern="^[1-9] [0-9] {4,}$" placeholder="10000" /> 
(QQ 号 从 100000 开始) </td> 
</tr> 
<tr> 
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<td align="right"> 固 定 电话 :</td> 
<td><input type="tel”" name="mytel" pattern="\d{3}-\d{8}1\d{4}-\d{7}"/> 
(国内 电话 号 码 (010-548789x x、0389-895421 x Xx) ) </td> 
</tr> 
站 EE 
<td align="right"> 手 机 号 码 :</td> 
<td><input type="text" name="myphone" pattern="^(13[0-9]114[517]115[011|2|3151617181 
9] 118[01112131516171819])\d{8}5" required="true"/> 
(以 13、17、15、18 开头 的 电话 号 码 ) </td> 
</tr> 
<tr> 
<td align="right"> 身 份 证 号 :</td> 
<td><input type="text" name="mycard”" pattern="^\d{15}1\d{18}$"/> 
(15 位 或 18 位 身份 证 号 ) </td> 
</tr> 
EE 
<td></td><td><input type="submit"” value=" 提 交 " /></td> 
</tr> 
</table> 
</form> 
</article> 
</div> 
</body> 
</html> 
相关 的 代码 实例 可 参考 Chap4.23.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-38 所 示 。 这 时 可 以 


看 到 “姓名 ”和 “QQ 号 码 ”两 个 文本 框 中 不 能 为 空 。 











eauiede 
(OER D fe///C/users/qlangu/Documents/ 会 | | Qa » 三 
Se Clg 
姓名 J 于 “| (汉字 , 只 继 包 含 中文 字符 ( 长度 大 于 2 有 小 于 12 】) 

QQS 码 (QQS 从 100000 开 始 ) 

国定 电话 : [ 《 国内 电话 号 码 (010-54878952、0389-89542163) ) 

手机 号 码 : | 【以 13、17、15、18 开 头 的 电话 号 码 ) 

身份 证 号 : [ 《15 位 或 18 位 身份 证 S ) 








4-38 ”应 用 required 属性 的 运行 结果 


4.5 表单 的 验证 


HTML 5 中 新 增 了 大 量 的 输入 类 型 、 表 单 属性 和 表单 元 素 , 同时 也 加 强 了 对 表单 元 素 的 验证 功能 ， 表 
单 验证 是 一 种 用 户 体验 的 优化 ， 它 为 终端 用 户 检测 无 效 的 数据 并 标记 这 些 错误 。 


认识 表单 验证 


验证 是 JavaScript 中 的 高 级 选项 之 一 ， 它 可 用 来 在 数据 被 送 往 服务 器 前 对 HTML 表单 中 的 这 些 输 
入 数据 进行 验证 ， 被 JavaScript 验证 的 这 些 典型 的 表单 数据 有 以 下 几 种 : 

。 用 户 是 否 已 填写 表单 中 的 必 填 项 目 ? 

。 用 户 输入 的 邮件 地 址 是 否 合法 ? 

。 是 否 已 输入 合法 的 日 期 ? 
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. 是 否 在 数据 域 (numeric field) 中 输入 了 文本 ? 

在 HIML 5 中 ， 自 动 验证 是 HTML 5 表单 的 默认 验证 方式 ， 它 会 在 表单 提交 时 执行 自动 验证 。 如 果 输 入 框 
的 内 容 不 合法 ， 那 么 验证 将 无 法 通过 ， 不 会 提交 表单 。HTML 5 中 新 增加 的 多 种 属性 实现 了 自动 验证 的 功能 ， 
具体 包括 如 下 : 

。 required 属性 : 限制 在 提交 时 元 素 内 容 不 能 为 空 。 如 果 元 素 中 的 内 容 为 空 ， 则 不 允许 提交 。 

。 pattern 属性 : 根据 设置 的 正则 表达 式 的 格式 验证 输入 的 内 容 是 否 有 效 ， 如 果 无 效 ， 则 不 允许 提交 。 

。 max 和 min 属性 : 限制 数值 类 型 输入 范围 的 最 大 值 和 最 小 值 ， 不 在 范围 内 的 不 允许 提交 。 

。 step 属性 : 限制 元 素 的 值 每 次 增加 或 者 减少 的 基数 ， 不 是 基数 倍数 时 不 允许 提交 ， 例 如 ， 当 想 让 

户 输入 的 值 在 0 一 100 之 间 ， 而 且 必 须 是 5 的 倍数 时 ， 可 以 将 step 属性 的 值 指定 为 5。 










































































4.5.2 CheckValidity() 验 证 


有 时 HTML 5 的 自动 验证 功能 并 不 能 满足 开发 者 的 需求 ， 这 就 需要 使 用 显示 验证 方式 ， 该 方式 需要 调 
CheckValidity0 方 法 , 它 对 表单 内 所 有 元 素 或 单个 元 素 都 可 以 进行 有 效 验证 。 目前 , <form> 元 素 、<input> 
元 素 、<select> 元 素 等 表单 元 素 都 具有 CheckValidity0 方 法 ， 该 方法 以 布尔 值 的 形式 返回 验证 结果 。 也 就 是 
说 ， 如 果 <input> 元 素 中 的 数据 是 合法 的 ， 则 返回 tue， 否 则 返回 false。 

【 例 4-24】〔 实 例文 件 ，ch04\Chap4.24.html》CheckValidity0 验 证 的 应 用 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

</head> 

<body> 

<p> 输 入 数字 并 单 击 验证 按钮 :</p> 

<input id="idl" type="number" min="100" max="300" required> 
<button onclick="myFunction()"> 验 证 </button> 


<p> 如 果 输 入 的 数字 小 于 100 或 大 于 300, 会 提示 错误 信息 .</p> 
<p id="demo"></p> 
<script> 
function myFunction() { 
Var inpObj=document .getElementById("id1l"); 
if (inpObj.checkValidity()==false) { 
document .getElementById ("demo") .innerHTML=inpObj .validationMessage; 
} else { 
document .getElementById ("demo") .innerHTML=" 输 入 正确 "; 













































































py 


. 
} 
</script> /C/Users/qiangu/Documents/# X 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap4.24.html 文件 ， 在 
Firefox 浏览 器 中 运行 的 结果 如 图 4-39 所 示 。 

在 文本 框 中 输入 不 符合 要 求 的 数字 ， 这 时 会 在 页 面 
的 下 方 显示 输入 错误 的 信息 提示 ， 如 图 4-40 所 示 。 

在 文本 框 中 输入 符合 要 求 的 数字 ， 这 时 会 在 页 面 的 
下 方 显 示 输 入 正确 的 信息 提示 ， 如 图 4-41 所 示 。 图 4-39 应 用 CheckValidity() 验 证 后 的 运行 结果 





> © © fley//C/Users/qiangy, hd 
次 最 过 沪 有 园 火 坝 启 方 站 训 加 新手 上 路 国 守 用 网 址 > 口 移动 书签 


输入 数字 并 点 击 验证 按钮 : 
启 | | 验证 


如 果 输 入 的 数字 小 于 100 或 大 于 300， 会 提示 错误 信息 。 
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NA 


/CyUsers/qiangu/Documents/E X /CiUsers/qiangu/Documents/ 庆 X 


© © file//c/Users/qiangy 
次 最 时 访 月 加 义 牟 计 方 站 点 医 新 手 上 :路 国 第 用 网 直 ”六 口 移 动 所 答 


© @ fileJWWcyUseryqiangu 
次 最 军 访 问 国 火狐 官方 站 点 代 新 手 上 路 加 军用 网 业 阔 、 品 移 动 版 # 答 


输入 数字 并 点 击 验证 按钮 : 输入 数字 并 点 击 验 证 按钮 : 


一 司 区 到 
如 果 输 入 的 数字 小 于 100 或 大 于 300 ,会 提示 错误 信息 。 
输入 正确 


如 果 输 入 的 数字 小 于 100 或 大 于 300 ， 会 提示 错误 信息 - 
请 选择 一 个 不 小 于 100 的 值 。 











图 4-40 不 符合 要 求 的 数字 图 4-41 符合 要 求 的 数字 


4.5.3 SetCustomValidity() 验 证 


SetCustomValidity() 方 法 适用 于 HITML 5 中 的 所 有 类 型 的 <input> 元 素 , 通过 自 定义 的 方式 对 用 户 输入 的 
信息 进行 验证 。 该 属性 设置 <input> 元 素 的 validationMessage 属性 ， 用 于 自 定义 错误 提示 信息 的 方法 。 使 
SetCustomValidity 设置 了 自 定 义 提 示 后 ，validity.customError 就 会 变 成 hue，checkValidity 就 会 返回 false。 
重新 判断 需要 取消 自 定义 提示 ， 代 码 如 下 : 

SetCustomValidity('') 

SetCustomValidity (null) 

SetCustomValidity (undefined) 

【 例 4-25】 《实例 文件 ，ch04\Chap4.25.html) SetCustomValidity0 验 证 的 应 用 。 代 码 如 下 ; 


<!DOCTYPE html> 
<html> 
<head> 
<title>SetCustomValidity() 验证 </title> 
</head> 
<body> 

<p> 输 入 数字 并 单 击 验证 按钮 :</p> 

<input id="idl" type="number" min="100" max="300" required> 

<button onclick="myFunction()"> 验 证 </button> 

<p> 如 果 输 入 的 数字 小 于 100 或 大 于 300, 会 提示 错误 信息 .</p> 

<p id="demo"></p> 
<script> 
function myFunction() { 

Var inpObj=document .getElementById("id1"); 

inpobj .setCcustomValidity(''); // 取消 自 定义 提示 的 方式 

if (inpObj.checkValidity()==false) { 

if(inpObj .value==""){ 
inpobj .setCustomValidity(" 不 能 为 空 ! ") > 
}else if(inpobj.value<100 || inpobj.value>300)1{ 
inpobj .setCustomValidity(" 请 重新 输入 数值 (100~300 之 间 ) !") 7 



























































} 
document .getElementById ("demo") .innerHTML=inpObj .validationMessage; 
} else { 
document .getElementById ("demo") .innerHTML=" 输 入 正确 "; 
} 
} 
</script> 
</body> 
</html> 
相关 的 代码 实例 可 参考 Chap4.25.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 4-42 所 示 。 


在 文本 框 中 输入 不 符合 要 求 的 数字 , 这 时 会 在 页 面 的 下 方 显示 需 重新 输入 的 验证 信息 , 如 图 4-43 所 示 。 
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/CYUsers/qiangu/Documents/E x SetCustomValidity0 验 证 
© © fileyWCVUsersyqiangu 局 他 | 图 | 三 Sp © © mey//c/Users/qiangu/D 过 合 | 为 | 三 
庚 最 党 访 问 国 火 负 育 方 站 点 加 新 手 上 路 国 和 用 网 址 ”六 口 共 动 版 蔬 等 好 最 守 访 问 国 火 用 让 方 站 点 总 新 手 上 路 国 写 用 网 上 。 》 口 移动 版 书 答 
输入 数字 并 点 击 验 证 按钮 : 输入 数字 并 点 击 验证 按钮: 
FE [E 相 
如 果 给 入 的 数字 小 于 100 或 大 于 300， 会 提示 错误 信息 。 如 果 输 入 的 数字 小 于 100 或 大 于 300， 会 提示 错误 信息 。 


请 重新 输入 数值 ( 100~300 之 间 ) ! 








图 4-42 应 用 SetCustomValidity() 验 证 后 的 运行 结果 图 4-43 不 符合 要 求 的 数字 


如 果 页 面 里 的 文本 框 为 空 ， 然 后 单 击 “ 验 证 ”按钮 ， 则 会 在 页 面 下 方 显示 “不 能 为 空 ”的 自 定义 信息 
提示 ， 如 图 4-44 所 示 。 

















SetCustomValidity( 验 证 


二 © gfile/W/CVUsersyqiangu/ 
闪 是 梨 访问 国 火狐 官方 站 点 各 新 手 上 路 国 党 用 网 址 》 


输入 数字 并 点 击 验证 按钮 : 

引 [验证 ] 

如 果 输 入 的 数字 小 于 100 或 大 于 300， 会 提示 错误 信息 。 
不 能 为 宝 ! 























4-44 文本 框 为 空 的 信息 提示 


4.6 ”典型 案例 一 一 制作 用 户 反 馈 页 面 


在 本 实例 中 ， 将 使 用 一 个 表单 内 的 各 种 元 素来 开发 一 个 简单 的 移动 用 户 反 馈 页 面 。 
【 例 4-26】 〈 实 例文 件 ，ch04\Chap4.26.html) 制作 移动 用 户 反馈 页 面 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<tit1le> 用 户 反馈 页 面 </title> 

</head> 

<body> 

<hl align=center> 用 户 反馈 页 面 </hl1> 

<form method="post" > 

<p> 姓 &nbsp; gnbsp; &nbsp; &nbsp; 名 : 

<input type="text" class=txt size="]2" maxlength="20" name="username" /> 
</p><p> 性 &nbsp; gnbsp; &nbsp; gnbsp; 别 : 

<input type="radio"” value="male"” /> 男 
<input type="radio” value="female"” /> 女 
</p><p> 年 &nbsp; &nbsp; &nbsp; &nbsp; 龄 : 

<input type="text" class=txt name="age"” /> 
</p> 

<p> 联 系 电话 : 

<input type="text" class=txt name="tel”" /> 
</p><p> 电 子 邮件 : 

<input type="text" class=txt name="email" /> 
</p><p> 联 系 地 址 : 


<input type="text" class=txt name="address" /> 





075 


HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 
NY 


</p> 

<p> 

请 输入 您 对 网 站 的 建议 <br> 

<textarea name="yourworks" cols="50" rows="5"> 
</textarea> 


<br> 

<input type="submit"” name="submit” value=" 提 交 "/> 
<input type="reset” name="reset” value=" 清 除 ”/> 
</p> 

</form> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap4.26.html 文件 ， 在 Firefox 浏 








览 器 中 运行 的 结果 如 图 4-45 所 示 。 可 以 看 到 创建 了 一 个 用 户 反 
馈 页 面 ， 该 页 面 中 包含 “用 户 反馈 页 面 "““ 姓 名 ”“ 性 别 ”"“ 年 龄 ” 
“联系 方式 "“ 电 子 邮件 "联系 地 址 "等 表单 元 素 , 还 包含 了 “ 提 


交 ” 
































和 “清除 ”按钮 。 


| Fr | 


所 1 了 了 GOTeWCcruseryqiangucC 人 安 鸭 三 
闪 二 WW 月 加 XIE 方 上 二 虱 新 于 上 第 国 室 抽 同 二 交口 各 十 答 


用 户 反馈 页 面 
本 二 
性 到: @ 男 O 女 
年 苍 : 








联系 电话 : 
电子 部 件 : 
联系 地 址 : 
请 输入 您 对 网 站 的 建议 


























4-45 用 户 反馈 页 面 


4.7 ”就 业 面试 技巧 与 解析 
4.7.1 面试 技巧 与 解析 (一 ) 


面试 官 : 请 问 HTML 5 表单 的 输入 类 型 有 哪些 ? 
应 聘 者 : HTML 5 表单 的 输入 类 型 包括 以 下 几 种 。 
。 url 类 型 用 于 说 明 网 站 网 址 。 





color 类 型 : color 类 型 的 <input> 元 素 用 来 选取 颜色 ， 它 : 
email 类 型 .用 于 让 浏览 者 输入 E-mail 地 址 。 

range 类 型 ， 显示 一 个 滚动 的 控件 ， 与 number 类 型 一 样 
控件 的 范围 。 








tel 类 型 ，tel 类 型 的 <input> 元 素 被 设计 为 用 来 输入 电话 号 码 的 专用 文本 框 。 


提供 了 一 个 颜色 选取 器 。 


， 用 户 可 以 使 用 max、min 和 step 属性 控制 


。 search 类 型 : search 类 型 的 <input> 元 素 是 一 种 专门 用 来 输入 搜索 关键 词 的 文本 框 。 


。 number 类 型 : 提供 了 一 个 输入 数字 的 输入 类 型 。 





。 datepickers 类 型 : 是 指 日 期 类 型 ，HTML 中 提供 了 多 个 可 供 选 取 日 期 和 时 间 的 新 输入 类 型 ， 用 于 验 


证 输入 的 日 期 与 时 间 。 


4.7.2 面试 技巧 与 解析 〈 二 ) 
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面试 官 : 请 问 HTML 5 新 增 了 哪些 表单 元 素 ? 
应 聘 者 : HTML 5 新 增加 的 表单 元 素 有 以 下 三 种 。 
。 <datalist>: 规定 了 <input> 元 素 可 能 的 选项 列表 。 











。 <keygen>: 作用 是 提供 一 种 验证 用 户 的 可 靠 方 法 ， 当 提交 表单 时 ， 会 生成 两 个 键 ， 一 个 是 私 钥 ， 








个 公 钥 。 私 钥 存 储 于 客户 端 ， 公 钥 则 被 发 送 到 服务 器 ， 公 钥 可 用 于 之 后 验证 用 户 的 客户 端 证 书 。 














e <output>: 不 同类 型 的 输出 ， 如 计算 或 脚本 输出 。 






































第 5 章 
使 用 HTML 5 绘制 移动 页 面 元 素 


~ 


学 习 指引 


在 使 用 HTML 5 开发 移动 网 页 的 过 程 中 ， 有 时 需要 绘制 一 些 元 素 ， 如 文字 、 图 形 等 。 这 就 需要 使 用 
HTML 5 新 增 的 canvas 标签 了 ， 该 标签 可 以 对 2D 或 位 图 进行 动态 脚本 的 泻 染 ， 结 合 JavaScript 可 以 绘制 
移动 页 面 元 素 。 


”重点 导读 


"熟悉 什么 是 canvas。 
* 掌握 绘制 基本 形状 。 
“掌握 绘制 颜色 渐变 。 
“掌握 图 形变 换 和 组 合 。 
* 掌握 图 片 的 常用 操作 。 
。 掌握 绘制 文本 元 素 。 
“掌握 绘制 动画 特效 。 


5.1 什么 是 canvas 











canvas 是 HTML 5 新 增 元 素 之 一 ， 用 于 图 形 的 绘制 ， 不 过 <canvas> 标 签 只 是 图 形容 器 ， 也 就 是 画布 ， 
具有 绘制 图 形 功 能 ， 用 户 必须 使 用 脚本 (通常 是 JavaScript) 来 绘制 图 形 ， 如 常见 的 矩形 、 圆 形 、 字 符 
等 ， 还 可 以 用 来 添加 图 像 ， 甚 至 绘制 文字 。 

canvas 标签 包含 两 个 属性 ， 分 别 是 width 和 height， 表 示 和 矩形 区 域 的 宽度 和 高 度 ， 这 两 个 属性 都 是 可 选 
的 ， 并 且 都 可 以 通过 CSS 来 定义 ， 其 默认 值 是 300px 和 150px。canvas 在 网 页 中 常用 格式 如 下 : 

<canvas id="myCanvas" width="200" height="100" style="border:lpx solid #000000;"> 

您 的 浏览 器 不 支持 HTML 5 canvas 标签 - 


</canvas> 
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在 上 面 的 实例 代码 中 ，id 表示 画布 对 象 名 称 ，width 和 height 分 别 表示 宽度 和 高 度 ; 最 初 的 画布 是 不 可 
见 的 ， 此 处 为 了 观察 这 个 矩形 区 域 ， 这 里 使 用 CSS 样式 ， 即 style 标记 。style 表示 画布 的 样式 。 如 果 浏 览 
器 不 支持 画布 标记 ， 会 在 画布 中 间 显 示 提 示 信 息 。 

【 例 5-1】 (实例 文件 ， ch05\Chaps.1.html) 绘制 一 个 简单 的 矩形 。 代 码 如 下 : 


<!DOCTYPE html> 












































<html> 
<head> 
<title> 绘 制 </title> 
</head> 
2 id="myC. ~ idth="200" height="100" SO el 
Canvas 1Q= myCanvas Wl leignt= 间 
style="border:1px solid #000000;"> I 
您 的 浏览 器 不 支持 HTML 5 canvas 标签 . 
</canvas> 
</body> 
</html> 
相关 的 代码 实例 可 参考 Chap5.1.html 文件 ， 在 Firefox 浏览 器 中 运 
行 的 结果 如 图 5-1 所 示 。 图 5-1 绘制 简单 的 矩形 


5.2 绘制 基本 形状 


画布 canvas 结合 JavaScript 不 但 可 以 绘制 简单 的 和 矩形， 还 可 以 绘制 一 些 其 他 的 常见 图 形 ， 例 如 直线 、 
圆 等 、 曲 线 等 。 


四 5 2 1 绘制 矩形 


单独 的 一 个 canvas 标记 只 是 在 页 面 中 定义 了 一 块 矩 形 区 域 ， 并 无 特别 之 处 ， 开 发 人 员 只 有 配合 使 
JavaScript 脚本 ， 才 能 够 完成 各 种 图 形 、 线 条 ， 以 及 复杂 的 图 形变 换 操作 。 与 基于 SVG 来 实现 同样 绘图 效 
果 相 比较 ，canvas 绘图 是 一 种 像素 级 别 的 位 图 绘图 技术 ， 而 SVG 则 是 一 种 矢量 绘图 技术 。 

使 用 canvas 和 JavaScript 绘制 一 个 矩形， 可 能 会 涉及 一 种 或 多 种 方法 ， 这 些 方法 如 表 5-1 所 示 。 










































































表 5-1 canvas 绘制 矩形 的 方法 与 功能 介绍 














方 法 功 能 

pe 绘制 一 个 矩形 ， 这 个 矩形 区 域 没有 边框 ， 只 有 填充 色 。 这 个 方法 有 4 个 参数 ， 前 两 个 表示 左上 
角 的 坐标 位 置 ， 第 三 个 参数 为 长 度 ， 第 四 个 参数 为 高 度 

strokeRect 绘制 一 个 带 边框 的 矩形 。 该 方法 的 4 个 参数 的 解释 同上 

clearRect 清除 一 个 矩形 区 域 ， 被 清除 的 区 域 将 没有 任何 线条 。 该 方法 的 4 个 参数 的 解释 同上 

















【 例 5-2】 (实例 文件 :ch05\Chap5.2.html) 绘制 一 个 复杂 的 矩形 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="300" height="200" style="border:lpx solid blue"> 
</canvas> 

<script type="text/javascript"> 

var c=document .getElementById("myCanvas"); 
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var cxt=c.getContext ("2d"); 
cxt .fillstyle="rgb (0,0,200)"; 
cxt .fillRect (10,20,100,100); 
</script> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap5.2.html 文件 ， 在 Firefox 浏览 
中 运行 的 结果 如 图 5-2 所 示 。 可 以 看 到 网 页 中 , 在 一 个 蓝 色 边框 中 


























人 市 py GG © file//Use “» 三 
显示 了 一 个 蓝 色 和 矩形 。 ES 








提示 : 在 上 面 代码 中 ， 首 先 定义 一 个 画布 对 象 ， 其 id 名 称 
为 myCanvas， 高 度 为 200px， 宽 度 为 150px， 其 次 定义 画布 边 国 | 
框 显示 样式 。 

在 JavaScript 代码 中 , 首先 获取 画布 对 象 , 然后 使 用 getContext 
获取 当前 2d 的 上 下 文 对 象 ， 并 使 用 flIRect 绘制 一 个 和 矩形。 其 中 
涉及 一 个 fillstyle 属性 ， 该 属性 用 于 设 定 填充 的 颜色 、 透 明度 等 ， 图 5-2 绘制 复杂 的 矩形 
如 果 设 置 为 fgb(200,0.0)， 则 表示 一 个 颜色 ， 不 透明 ， 如 果 设 置 为 
rgba(0,0,200,0.5)， 则 表示 一 个 颜色 ， 透 明度 为 50%。 


5.2.2 ”绘制 圆 形 


在 canvas 中 通过 beginPath() 方 法 开始 绘制 路 径 ， 绘 制 完成 后 调用 fll0 和 stroke0 完 成 填充 和 设置 边框 ， 下 
通过 closePath() 方 法 结束 路 径 的 绘制 。 在 画布 中 绘制 圆 形 ， 可 能 要 涉及 下 面 几 个 方法 ， 如 表 5-2 所 示 。 













































































表 5-2 canvas 绘制 圆 形 的 方法 与 功能 介绍 


方 ”法 功 能 
beginPath() 开始 绘制 路 径 
arc(x,y,radius,startAngle, x 和 y 定义 的 是 圆 的 原点 ，radius 是 圆 的 半径 。startAngle 和 endAngle 是 弧度 ， 不 是 
endAngle.anticlockwise) 度数 ，anticlockwise 是 用 来 定义 画 圆 的 方向 ， 值 是 true 或 false 
closePath() 结束 路 径 的 绘制 
fil0 进行 填充 
stroke0) 设置 边框 


【 例 5-3】【〔 实 例文 件 ，ch05\Chap5.3.html) 绘制 圆 形 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="200" height="200" style="border:lpx solid blue"> 
</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById("myCanvas"); 
Var cxt=c.getContext ("2d"); 

cxt .fillstyle="#FFAAOO0"; 

cxt.beginPath (); 
cxt.arc(100,100,80,0,Math.PI*2, true); 
cxt.closePath(); 

cxt .fill(): 

</script> 

</body> 

</html> 
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Sb 





相关 的 代码 实例 可 参考 Chap5.3.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 5-3 所 示 。 可 以 看 到 在 
网 页 的 矩形 边框 中 显示 了 一 个 黄色 的 圆 。 





























4 人 G|@mewWcmser » 3 
次 最 第 访问 问 痰 到 官方 站 点 六 口 移动 版 书 和 














图 5-3 绘制 圆 形 
是 5.2.3 绘制 直线 


使 用 moveTo 与 lineTo 可 以 绘制 直线 。 使 用 moveTo(x,y) 方 法 设置 绘图 起 始 坐 标 ， 而 lineTo(x,y) 方 法 可 
以 从 当前 起 点 绘制 直线 、 圆 弧 及 曲线 到 目标 位 置 。 最 后 ， 可 以 调用 closePath0 方 法 将 自 定义 图 形 进行 闭合 ， 
该 方法 将 自动 创建 一 条 从 当前 坐标 到 起 始 坐标 的 直线 。canvas 绘制 直线 的 方法 与 功能 如 表 5-3 所 示 ， 其 中 
常用 的 方法 是 moveTo 和 lineTo。 

































































表 5-3 canvas 绘制 直线 的 方法 与 功能 介绍 


方法 或 属性 功 能 
moveTo(x.y) 不 绘制 ， 只 是 将 当前 位 置 移动 到 新 目标 坐标 x,y)， 并 作为 线条 的 开始 点 
绘制 线条 到 指定 的 目标 坐标 (x,y)， 并 且 在 两 个 坐标 之 间 画 一 条 直线 。 不 管 调用 哪 一 个 ， 都 不 
lineTo(x.y) 会 真正 画 出 图 形 ， 因 为 还 没有 调用 stroke 绘制) 和 fil (填充 ) 函数 。 当 前 ， 只 是 在 定义 路 径 
的 位 置 ， 以 便 后 面 绘制 时 使 用 
strokeStyle 指定 线条 的 颜色 
lineWidth 设置 线条 的 粗细 





【 例 5-4】 〈 实 例文 件 : ch05\Chap5.4.html) 绘制 直线 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<body> 

<canvas id="myCanvas" width="200" height="200" style="border:lpx solid blue"> 
</canvas> 

<script type="text/javascript"> 

Var c=document .getElementById("myCanvas"); 
Var cxt=c.getContext ("2d"); 

cxt .beginPath(); 

cxt .strokeStyle="rgb(100,0,100)"; 

cxt .moveTo (20,20); 

cxt .lineTo(200,50); 

cxt.lineWidth=10; 

cxt .stroke () 7 

cxt.closePath(); 

</script> 

</body> 

</html> 
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相关 的 代码 实例 可 参考 Chap5.4.html 文件 ， 在 Firefox 浏览 器 中 


运行 的 结果 如 图 5-4 所 示 ， 可 以 看 到 在 网 页 中 绘制 了 一 条 直线 。 
提示 : 在 上 面 代码 中 ,使 用 moveTo 方法 定义 一 个 坐标 位 置 ， 为 Ne alisha 构 训 卫 
次 最 党 访问 国 火狐 官方 站 点 为。 口 移动 版 书 答 
(20,20 ) ， 下 面 以 此 坐标 位 置 为 起 点 绘制 一 条 直线 ， 并 使 用 lineWidth 
设置 直线 的 宽度 ， 使 用 strokeStyle 设置 直线 的 颜色 ， 使 用 lineTo 设 一 
置 直 线 的 结束 位 置 。 


5.2 


域 ， 

线 
当前 
法 返 










































.4 绘制 贝 济 埃 曲 线 


使 用 bezierCurveTo 可 以 绘制 贝 济 埃 曲 线 ， 在 数学 的 数值 分 析 领 
贝 济 埃 曲线 (Be zier 曲线 ) 是 计算 机 图 形 学 中 相当 重要 的 参数 国生 全 证 全 
。bezierCurveTo0 表 示 为 一 个 画布 的 当前 子路 径 添 加 一 条 三 次 贝 塞 尔 曲线 。 这 条 曲线 的 开始 点 是 画布 的 
点 ,而 结束 点 是 (x,y)。 两 条 贝 塞 尔 曲 线 控制 点 (cpX1,cpY1) 和 (cpX2,cpY2) 定 义 了 曲线 的 形状 。 当 这 个 方 
可 的 时 候 ， 当 前 的 位 置 为 (x,y)。 方 法 bezierCurveTo 具体 语法 格式 如 下 : 
bezierCurveTo (cpX1l, cpYl, cpX2, cpY2, x, y) 


其 参数 的 含义 如 表 5-4 所 示 。 


























































































































表 5-4 ”bezierCurveTo 方法 的 参数 及 描述 






和 曲线 的 开始 点 (当前 位 置 ) 相 关联 的 控制 点 的 坐标 
和 曲线 的 结束 点 相关 联 的 控制 点 的 坐标 
曲线 的 结束 点 的 坐标 


cpX1, cpY1 






cpX2., cpY2 






【 例 5-5】【〔 实 例文 件 ，ch05\Chap5.5.html) 绘制 贝 济 埃 曲线 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 贝 济 埃 曲 线 </title> 
<script> 
function draw(id) 
{ 
Var canvas=document .getElementById (id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext ('2d'); 
context .fillstyle="#eeeeff"; 
context .fillRect (0,0,400,300); 
Var n=0; 
Var dx=150; 
Var dy=150; 
Var s=100; 
context .beginPath () 7 
context .globalCompositeOperation='and'"7 
context .fil1Style='rgb(100,255,100) "7 
Context .StrokeStyle='rgb(0,0,100) "> 
Var x=Math.sin(0); 
Var y=Math.cos(0); 
Var dig=Math.PI/15*11; 
for (var i=0;i<30;i++) 
{ 
Var x=Math.sin(i*dig); 


081 


/天 _ 
HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 


var y=Math.cos (ifdig)7 
context .bezierCurveTo (dx+x*s, dy+y*s-100, dx+x*s+100, dyty*+s, dx+x*s, dy+y*3); 
} 
context -closePath () 7 
context .fill(); 
context .stroke () 7 
人 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h2> 贝 济 埃 曲线 </h2> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 
相关 的 代码 实例 可 参考 Chap5.5.html 文件 ， 在 Firefox 浏览 
器 中 运行 的 结果 如 图 5-5 所 示 。 可 以 看 到 ， 在 网 页 中 显示 了 一 A i 
© fiey//C/Users/qiange ~ 局 
条 贝 济 埃 线 。 闪 最 守 访 问 国 火 级 官方 站 点 辜 新 手 + 路 六 口 移动 书签 
提示 : 在 上 述 代 码 中 ， 首 先 使 用 语句 fillRect(0,0,400,300) 贝 济 埃 曲线 
绘制 了 一 个 矩形 ， 其 大 小 和 画布 相同 ， 其 填充 闫 色 为 浅 青 色 。 
下 面 定 义 几 个 变量 , 用 于 设 定 曲线 的 坐标 位 置 ， 在 for 循环 中 使 
用 bezierCurveTo 绘制 贝 济 埃 曲线 。 


5.2.5 ”绘制 带 阴影 的 图 形 


在 画布 canvas 上 绘制 带 有 阴影 效果 的 图 形 非常 简单 ， 只 需 
要 设置 几 个 属性 即 可 。 这 几 个 属性 分 别 为 shadowOffsetX、 
shadowOffsetY shadowBlur 和 shadowColor, 其 属性 shadowColor 
表示 阴影 颜色 ， 其 值 和 CSS 颜色 值 一 致 。shadowBlur 表示 设置 5-5 ”绘制 贝 济 埃 曲线 
影 模糊 程度 。 此 值 越 大 ， 阴 影 越 模糊 。shadowOffsetX 和 
shadowOffsetY 属性 表示 阴影 的 x 和 y 偏 移 量 ， 单 位 是 像素 。 
【 例 5-6】 实例 文件 ，ch05\Chap5.6.html) 绘制 带 阴影 的 图 形 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制 阴 影 效 果 图 形 </title> 
</head> 
<body> 
<canvas id="my canvas" width="200" height="200" style="border:1lpx solid #ff0000"></canvas> 
<script type="text/javascript"> 
Var elem=document .getElementById("my canvas"); 
if (elem && elem.getContext) { 
Var context=elem.getContext ("2d"); 
//shadowOffsetX 和 shadowOffsetY: 阴 影 的 x 和 y 偏 移 量 ,单位 是 像素 . 
context .shadowOffsetX=15; 
context .shadowOffsetY=15; 
//hadowBlur: 设 置 阴影 模糊 程度 .此 值 越 大 , 阴影 越 模糊 .其 效果 和 Photoshop 的 高 斯 模糊 滤 镜 相同 . 
context .shadowBlur=10; 
//shadowColor: 阴 影 颜色 .其 值 和 CSS 颜色 值 一 致 . 
//context.shadowColor='rgba(255，0，0，0.5)'; 或 下 面 的 十 六 进 制 的 表示 方法 
context .shadowColor="#f£00°'; 


context .fillstyle="#00f"; 
context .fillRect (20, 20, 150, 100); 


曲线 x 


















































} 
</script> 
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</body> 
</html> 


相关 的 代码 实例 可 参考 Chap5.6.html 文件 ， 在 Firefox 浏览 器 中 运 
行 的 结果 如 图 5-6 所 示 。 可 以 看 到 ， 在 网 页 上 显示 了 一 个 蓝 色 矩形 ， TO Ce 
其 阴影 为 红色 和 矩形 。 次 最 访问 国 义 闻 记 方 站 襄 。 口 移动 本 和 




















5.3 绘制 颜色 渐变 


渐变 是 两 种 或 更 多 颜色 的 平滑 过 渡 ， 是 指 在 颜色 集 上 使 用 逐步 抽 
样 算法 ， 并 将 结果 应 用 于 描 边 样式 和 填充 样式 中 。canvas 的 绘图 上 下 
文 支持 两 种 类 型 的 渐变 : 线性 渐变 和 放射 性 渐变 ， 其 中 放射 性 渐变 也 图 5-6 “绘制 带 阴影 的 图 形 
称 为 径 向 渐变 。 


5.3.1 线性 颜色 渐变 


创建 线性 颜色 渐变 首先 需要 创建 渐变 对 象 ， 然 后 为 渐变 对 象 设置 颜色 并 指明 过 渡 方 式 ， 最 后 在 context 
上 为 填充 样式 或 描 边 样式 设置 渐变 。 
设置 显示 颜色 ， 需 要 在 渐变 对 象 上 使 用 addColorStop 函数 。 除 了 可 以 变换 成 其 他 颜色 外 ， 还 可 以 为 颜 
色 设 置 alpha 值 (如 透明 )， 并 且 alpha 值 也 是 可 以 变化 的 。 为 了 达到 这 样 的 效果 ， 需 要 使 用 颜色 值 的 另 一 种 
表示 方法 ， 例 如 内 置 alpha 组 件 的 CSSrgba 函数 。 绘 制 线性 渐变 ， 会 使 用 到 下 面 几 个 方法 ， 如 表 5-5 所 示 。 



















































































表 5-5 ”绘制 线性 渐变 的 方法 与 功能 介绍 


方 和 时 大 功 能 
函数 允许 指定 两 个 参数 ， 颜 色 和 偏 移 量 。 颜 色 参数 是 指 开发 人 员 希 望 在 偏 移 
addColorStop 位 置 描 边 或 填充 时 所 使 用 的 颜色 。 偏 移 量 是 一 个 0.0~1.0 的 数值 ， 代 表 沿 着 


渐变 线 渐变 的 距离 有 多 远 
createLinearGradient(x0,y0,x1,x1) 沿 着 直线 从 (x0,y0) 至 (x1,y1) 绘 制 渐变 
【 例 5-7】〔 实 例文 件 ，ch05\Chap5.7.html》 绘制 线性 颜色 渐变 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 线 性 渐变 </title> 

</head> 

<body> 

<h1> 绘 制 线性 渐变 </h1> 

<canvas id="canvas" width="400" height="300" style="border:lpx solid red"/> 
<script type="text/javascript"> 

var c=document .getElementById("canvas"); 

Var cxt=c.getContext ("2d"); 

Var gradient=cxt.createLinearGradient (0,0,0,canvas.height); 
gradient .addColorStop (0, '#FFFFFF'); 

gradient .addColorStop (1, '#FF0000'); 

cxt .fillstyle=gradient; 

cxt .fillRect (0,0,400,400); 

</script> 

</body> 

</html> 
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相关 的 代码 实例 可 参考 Chap5.7.html 文件 ， 在 Firefox 浏览 器 中 ER - -| 
运行 的 结果 如 图 5-7 所 示 。 可 以 看 到 在 网 页 中 , 创建 了 一 个 垂直 方向 | > e [DiENCUewyqar 你» 加 


上 的 渐变 ， 从 上 到 下 颜色 逐渐 变 深 。 Sema EA BFL Doete 

提示 : 上 面 的 代码 使 用 2D 环境 对 象 产 生 了 一 个 线性 渐变 对 和 象 ， “绘制 线性 渐变 
渐变 的 起 始点 是 (0，0 ) ， 渐 变 的 结束 点 是 (0，canvas.height) 。 
下 面 使 用 addColorStop 函数 设置 渐变 颜色 ， 最 后 将 渐变 填充 到 上 下 
文 环境 的 样式 中 。 


5.3.2 ” 径 向 颜色 渐变 


除了 线性 渐变 以 外 ，HTML 5 canvas API 还 支持 放射 性 渐变 ， 所 
谓 放射 性 渐变 就 是 颜色 会 介 于 两 个 指定 圆 间 的 锥 形 区 域 平滑 变化 。 
放射 性 渐变 和 线性 渐变 使 用 的 颜色 终止 点 是 一 样 的 。 如 果 要 实现 放 图 5-7 绘制 线性 渐变 
射线 渐变 ， 即 径 向 渐变 ， 需 要 使 用 createRadialGradient 方法 。 
createRadialGradient(x0,y0,r0,x1,y1,r1) 方 法 表示 沿 着 两 个 圆 之 间 的 锥 面 绘制 渐变 。 其 中 前 3 个 参数 代表 
开始 的 圆 ， 圆 心 为 (x0,y0) ， 半 径 为 0。 最 后 3 个 参数 代表 结束 的 圆 ， 圆 心 为 (xl1.y1)， 半 径 为 zl。 

【 例 5-8】〔 实 例文 件 ，ch05\Chap5.8.html) 绘制 径 向 渐变 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<title> 径 向 渐变 </title> 

</head> 

<body> 

<h1> 绘 制 径 向 渐变 </h1> 

<canvas id="canvas" width="400" height="300" style="border:lpx solid red"/> 


<script type="text/javascript"> 
var c=document .getElementById("canvas"); i 本 




































































Var cxt=c.getContext ("2d"); 9 
Var gradient=cxt .createRadialGradient (canvas .width/2,canvas. 起 © © fleWCYVUsersyqian … ' 今 三 
height/2,0,canvas.width/2, canvas.height/ 2,150); 次 最 荣 访问 国 火 多 官方 尖 点 加 新 于 上 路 »》 品 移 动 所 位 
gradient .addColorStop (0,''#FFFFFF"); 

gradient .addColorStop (1, "#FF0000"); 绘制 径 向 渐变 


cxt .fillstyle=gradient; 

cxt.fillRect (0,0,400,400); 

</script> 

</body> 

</html> 

相关 的 代码 实例 可 参考 Chap5.8.html 文件 , 在 Firefox 浏览 器 中 运 
行 的 结果 如 图 5-8 所 示 。 可 以 看 到 ， 在 网 页 中 从 圆 的 中 心 亮点 开始 ， 
向 外 逐步 发 散 ， 形 成 了 一 个 径 向 渐变 。 

提示 : 在 上 面 代码 中 ,首先 创建 渐变 对 象 gradient， 此 处 使 用 方法 
createRadialGradient 创建 了 一 个 径 向 渐变 ， 然 后 使 用 addColorStop 添 
加 颜色 ， 最 后 将 渐变 填充 到 上 下 文 环境 中 。 图 5-8 绘制 径 向 渐变 











5.4 图 形变 换 和 组 合 


画布 canvas 不 但 可 以 使 用 moveTo 这 样 的 方法 来 移动 画笔 、 绘 制图 形 和 线条 ， 还 可 以 使 用 变换 来 调整 
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画笔 下 的 画布 。 变 换 的 方法 包括 旋转 、 缩 放 、 变 形 和 平移 等 。 
5.4.1 图 形 平移 
































如 果 要 对 图 形 实现 平移 ， 需 要 使 用 translate (x, y) 方法 ， 该 方法 表示 在 平面 上 平移 ， 即 开始 以 原点 为 参 “ 
考 ， 然 后 以 偏 移 后 的 位 置 作为 坐标 原点 。 也 就 是 说 原来 在 i 100)， 然 后 偏 移 (1, 1)， 新 的 坐标 原点 在 





(101,101) 而 不 是 (1,1)。 
【 例 5-9】 (实例 文件 ，ch0s\Chap5.9.html) 图 形 
<!DOCTYPE html> 
<html> 
<head> 
<title> 图 形 平移 </title> 
<script> 
function draw(id) 
{ 
Var canvas=document .getElementById (id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext ('2d'); 
context .fillStyle="#eeeeff"; 
context.fillRect (10,10,400,300); 
Context .translate(10,10) 7 
Context .fil1Style='"rgba(0,255,255,0.5) ?77 
for (var i=0;i<50;i++){ 
Context .translate(60,60)7 
context .fillRect (0,0,100,50); 
} 
} 





SN 


平移 。 代 码 如 下 : 



































</script> 

</head> 

<body onload="draw('canvas');"> 

<h3> 图 形 平移 </h3> 

<canvas id="canvas" width="400" height="300" /> 

</body> 

</html> 

相关 的 代码 实例 可 参考 Chap5.9.html 文件 ， 在 Firefox 浏览 器 中 ms 2 到 
运行 的 结果 如 图 5-9 所 示 。 可 以 看 到 网 页 中 从 坐标 位 置 (10.10) 开始 Gam vanen mn omnes 
绘制 矩形 ， 并 每 次 以 指定 的 平移 距离 绘制 矩形 。 国生 移 

提示 : 在 draw 函数 中 ,使 用 fillRect 方法 绘制 了 一 个 和 矩形， 在 下 
面 使 用 translate 方法 平移 到 一 个 新 位 置 ， 并 从 新 位 置 开 始 ， 使 用 for [| 


循环 ， 连 续 移动 多 次 坐标 原点 ， 即 多 次 绘制 矩形 。 


本 到 
5.4.2 图 形 缩放 四 本 
| 


图 形 缩放 是 指 图 形 的 缩小 或 放大 效果 ， 实 现 该 功能 需要 使 
scale(x.y) 函 数 ， 该 函数 带 有 两 个 参数 ， 分 别 代表 在 x、y 两 个 方向 上 图 5-9 图 形 平移 
的 值 。 每 个 参数 在 canvas 显示 图 像 的 时 候 ， 向 其 传递 在 本 方向 轴 上 
图 像 要 放大 〈 或 者 缩小 ) 的 量 。 如 果 x 值 为 2， 就 代表 所 绘制 图 像 中 全 部 元 素 都 会 变 成 两 倍 宽 。 如 果 y 值 
为 0.5， 绘 制 出 来 的 图 像 全 部 元 素 都 会 变 成 之 前 的 一 半 高 。 
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【 例 5-10】 〈 实 例文 件 : ch05\Chap5.10html) 图 形 缩放 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<title> 图 形 缩放 </title> 
<script> 
function draw(id) 
由 











var canvas=document .getElementById (id); 
if(canvas==null) 
return false; 
Var context=canvas.getContext('2d'); 
context .fillstyle="#eeeeff"; 
context.fillRect (0,0,400,300); 
context.translate (10,50); 
context .fil1Style='rgba(0,255,0,0.25) "7 
for (var i=0;i<50;i++){ 
context.scale(3,1); 
context .fillRect (0,0,100,50); 
} 
再 
</script> 
</head> 
<body onload="draw('canvas');"> 
<h3> 图 形 缩放 </h3> 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap5.10.html 文件 ， 在 Firefox 浏览 Em | 
器 中 运行 的 结果 如 图 5-10 所 示 。 在 上 面 代码 中 ,实现 缩放 操作 是 






































所 GL | © filey///C/Users/qiar 4»| 各 
放 在 for 循环 中 完成 的 ， 在 此 循环 中 ， 以 原来 图 形 为 参考 物 ， 使 ”| 六 mew 四 XI 加 所 上 > 口 自动 答 
其 在 x 轴 方 向 增加 为 3 倍 宽 ，y 轴 方 向 变 为 原来 的 1 倍 。 a 








二 要 所 作 并 不 限于 久 放 和 平 各 ， 开 可以 人 月 钙 站 | 用 和 


context.rotate(angle) 来 旋转 图 像 ， 甚 至 可 以 直接 修改 底层 变换 和 矩阵 
以 完成 一 些 高 级 操作 ， 如 剪裁 图 像 的 绘制 路 径 。 例 如 























context.rotate(1.57) 表 示 旋 转角 度 参 数 以 弧度 为 单位 。 
rotate( 方 法 默认 地 从 左上 端的 《0.0) 开始 旋转 ， 通 过 指定 一 图 5 10 图 形 缩放 














个 角度 ， 改 变 了 画布 坐标 和 Web 浏览 器 中 <canvas> 元 素 的 像素 之 间 的 映射 ， 使 得 任意 后 续 绘图 在 画布 中 都 
显示 为 旋转 。 它 并 没有 旋转 <canvas> 元 素 本 身 。 注 意 ， 这 个 角度 是 用 弧度 指定 的 。 
【 例 5-11】 〈 实 例文 件 : ch0S\Chap5.11html) 图 形 旋转 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<title> 图 形 旋 转 </title> 
<script> 
function draw (id) 
| 


var canvas=document .getElementById (id); 
if(canvas==nul1) 
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return falsey 
var context=canvas.getContext ('2d'); 
context .fillstyle="#eeeeff"; 
context .fillRect (0,0,400,300); 
context .translate (150,150); 
context .fil1Style='"rgba(255,0,0,0.25) "7 
for(var i=0;i<50;it+){ 
context .rotate (Math.PI/10); 
context .fillRect (0,0,100,50); 
} 
1 国 == “EC 
</script> 所 © © fle///c/Users/qian 一 -» 名 


</head> 净 最 守 访 问 国 火 缴 定 方 站 点 芒 新 手 上 小 » 口 移动 版 书签 
<body onload="draw('canvas');"> 


<h3> 图 形 旋转 </h3> 旋转 图 形 
<canvas id="canvas" width="400" height="300" /> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap5.11.html 文件 , 在 Firefox 浏览 
中 运行 的 结果 如 图 5-11 所 示 。 在 显示 页 面 上 多 个 和 矩形 以 中 心 弧 度 
为 原点 进行 旋转 。 在 上 面 代码 中 ， 使 用 rotate() 方 法 在 for 循环 中 ， 
对 多 个 图 形 进行 旋转 ， 其 旋转 角度 相同 。 


5.4.4 ”和 矩 阵 变换 


矩阵 变换 是 context 内 实现 平移 、 缩 放 和 旋转 的 一 种 机 制 。 它 
的 主要 原理 是 矩阵 相 乘 。 答 阵 变换 最 常用 的 一 种 方法 就 是 transform0， 该 方法 替换 该 图 的 当前 转换 矩阵 。 
具体 语法 格式 如 下 : 

context.transform(a,b,c,d,e,f); 


参数 值 介绍 如 表 5-6 所 示 。 






































5-11 图 形 旋 转 











表 5-6 参数 值 

描述 

水 平 缩放 绘图 

水 平 倾斜 绘图 

垂直 倾斜 绘图 

垂直 缩放 绘图 

水 平移 动 绘图 

垂直 移动 绘图 

在 使 用 transform( 方 法 时 ， 画 布 上 的 每 个 对 象 都 拥有 一 个 当前 的 变换 矩阵 ，transform() 方 法 替换 当前 的 

变换 矩阵 ， 它 以 下 面 描述 的 矩阵 来 操作 当前 的 变换 矩 阵 : 





























a c e 
br qd fF 
a 0 1 








换 句 话说 ，transform0 人 允许 用 户 缩放 、 旋 转 、 移 动 并 倾斜 当前 的 环境 。 该 变换 只 会 影响 tansform0 方 法 
调用 之 后 的 绘图 。 
注意 : transform() 方 法 的 行为 相对 于 由 Iotate0、scale(0)、translate0 或 transform() 完 成 的 其 他 变换 。 例 如 : 
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如 果 用 户 已 经 将 绘图 设置 为 放 到 两 倍 ， 则 transform0 方 法 会 把 绘图 再 放大 两 倍 ， 用 户 的 绘图 最 终 将 被 放大 


四 倍 


行 的 结果 如 图 5-12 所 示 。 可 以 看 出 页 面 中 绘制 了 一 个 矩形 ， 然 后 通过 











【 例 5-12】 (实例 文件 : ch05\Chap5.12.html) 利用 德 阵 变换 图 形 。 代 码 如 下 : 
<!DOCTYPE html> 

<html> 

<head> 

<title> 和 矩 阵 变换 </title> 

</head> 

<body> 

<canvas id="myCanvas" width="300" height="150" style="border:lPx solid #d3d3d3;"> 
</canvas> 

<script> 

Var c=document .getElementById("myCanvas"); 
Var ctx=c.getContext ("2d"); 
ctx.fillstyle="yellow"; 

ctx.fillRect (0,0,250,100) 
ctx.transform(1,0.5,-0.5,1,30,10); 
ctx.fillstyle="red"; 

ctx.fillRect (0,0,250,100) 7 
ctx.transform(1,0.5,-0.5,1,30,10); 
ctx.fillstyle="blue"; 

ctx.fillRect (0,0,250,100); 

</script> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap5.12.html 文件 , 在 Firefox 浏览 器 中 运 























G © file//C/Us > 革 民 二 


transform() 方 法 添加 一 个 新 的 变换 矩阵 ， 再 次 绘制 矩形 ， 添 加 一 个 新 的 妇 最 访问 国 炎 员 让 让 点。 光束 于 





变换 矩阵 ， 然 后 再 次 绘制 矩形 。 





下 ， 


5.4.5 图 形 组 合 








前 面 介绍 过 ， 可 以 将 一 个 图 形 画 在 另 一 个 图 形 上 ， 但 大 多 数 情况 
这 样 做 不 够 好 。 例 如 ， 它 这 样 受制 于 图 形 的 绘制 顺序 。 不 过 ， 用 图 5-12 ”利用 矩阵 变换 图 形 








户 可 以 利用 globalCompositeOperation 属性 来 改变 这 些 做 法 ， 这 样 不 仅 





可 以 在 已 有 图 形 上 再 画 新 图 形 ， 还 可 以 用 来 遮盖 、 清 除 某 些 区 域 。 其 语法 格式 如 下 : 


时 
Zz 在 





globalCompositeOperation=type 

该 属性 的 作用 是 设置 不 同形 状 的 组 合 类 型 ， 其 中 type 表示 方 的 图 形 是 已 经 存在 的 canvas 内 容 ， 圆 的 图 
新 的 形状 ， 其 默认 值 为 source-over， 表 示 在 canvas 内 容 上 画 新 的 形状 。 

属性 值 ype 具有 12 个 含义 ， 其 具体 含义 如 表 5-7 所 示 。 



































表 5-7 globalCompositeOperation 属性 的 值 


























属 性 值 说 有 明 
source-over(default) 这 是 默认 设置 ， 新 图 形 会 覆盖 在 原 有 内 容 之 上 
destination-over 会 在 原 有 内 容 之 下 绘制 新 图 形 
source-in 新 图 形 仅 出 现 与 原 有 内 容重 又 的 部 分 ， 其 他 区 域 都 变 成 透明 的 
destination-in 原 有 内 容 中 与 新 图 形 重 到 的 部 分 会 被 保留 ， 其 他 区 域 都 变 成 透明 的 
source-out 结果 是 只 有 新 图 形 中 与 原 有 内 容 不 重 又 的 部 分 会 被 绘制 出 来 
destination-out 原 有 内 容 中 与 新 图 形 不 重叠 的 部 分 会 被 保留 
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续 表 





属 性 值 说 明 
source-atop 新 图 形 中 与 原 有 内 容重 到 的 部 分 会 被 绘制 ， 并 覆盖 于 原 有 内 容 之 上 
原 有 内 容 中 与 新 内 容重 到 的 部 分 会 被 保留 ， 并 会 在 原 有 内 容 之 下 绘制 新 图 形 
两 
两 























destination-atop 


lighter 
darker 





图 形 中 重合 部 分 做 加 色 处 理 

图 形 中 重 又 部 分 做 减 色 处 理 

重 又 的 部 分 会 变 成 透明 的 

copy 只 有 新 图 形 会 被 保留 ， 其 他 都 会 被 清除 掉 


【 例 5-13】〔 实 例文 件 ，ch05\Chap5.13.html》 图 形 组 合 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 图 形 组 合 </title> 
<script> 
function draw(id) 
{ 
Var canvas=document .getElementById(id); 
if (canvas==null) 
return false; 
Var context=canvas.getContext ('2d'); 
Var oprtns=new Array( 
"source-atop", 
"source-in", 
"source-out", 
"source-over", 
"destination-atop", 
"destination-in", 
"destination-out", 
"destination-over", 
"lighter", 














XOT 




















context .fillstyle="blue"; 
context .fillRect (60, 60,200,200); 
context .globalCompositeOperation=oprtns[i]; 
context .beginPath () 7 3 CD Tio//AL 一 人 
context .fillstyle="red"; A De 
context.arc(100,100,100,0,Math.PI*2, false); 
context .fill(); 形 组 合 


+ - Oo 





</script> 

</head> 

<body onload="draw ('canvas');"> 
<h1> 图 形 组 合 </h1> 

<canvas id="canvas" width="400" height="300" /> 
</body> 

</html> 


相关 的 代码 实例 可 参考 Chap5.13.html 文件 ， 在 Firefox 浏览 器 
中 运行 的 结果 如 图 5-13 所 示 。 在 显示 页 面 上 绘制 了 一 个 矩形 和 圆 ， 
矩形 和 圆 交叉 的 位 置 ， 以 空白 显示 。 图 5-13 ”图形 组 合 
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5.5 图 片 的 常用 操作 


利用 画布 canvas 不 仅 可 以 绘制 图 形 ， 还 可 以 对 图 片 进 行 操作 ， 如 绘制 图 片 、 平 铺 图 片 、 剪 裁 图 片 等 。 


绘制 图 片 


drawImage() 方 法 可 以 在 画布 canvas 上 绘制 图 片 , 可 以 绘制 图 片 的 某 一 部 分 , 也 可 以 添加 或 减少 图 
片 的 尺寸 ，drawImage() 方 法 包含 3 种 使 用 语法 ， 具 体 介绍 如 下 。 










































































1. drawlmage(image,dx,dy) 

这 种 方法 是 最 常用 的 绘制 方法 ， 主 要 作用 是 接受 一 个 图 片 ， 并 将 之 画 到 canvas 中 。 这 里 需要 给 出 坐标 
(dx,dy)， 该 坐标 代表 图 片 的 左上 角 。 例 如 ， 坐 标 (0，0) 将 把 图 片 画 到 canvas 的 左上 角 。 

【 例 5-14】 〈 实 例文 件 ，ch05\Chap5.14.html) 绘制 图 片 1。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 绘 制图 片 </title> 

<style> 

#rgbaLl { 
width:300px; 
height:200px; 
font-size:14px; 
color:#000; 
margin-left:20px; 

















), 
</style> 
</head> 
<body> 
<div id="smiddle"> 
<article> 
<p> 要 使 用 的 图 片 :</p> 
<img src="01.jpg" id="img"> 
<canvas id="MyCanvas"” width="400” height="300"> 当 前 浏览 器 不 支持 canvas 元 素 </canvas> 
</article> 
<script> 
window.onload=function(){ 
Var canvas=document .getElementById ("MyCanvas"); 
if(canvas.getContext){ 
Var context=canvas.getContext ("2d"); 
Var image=document .getElementById("img"); 
context .drawImage (image, 0,0); 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap5.14.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 5-14 所 示 。 第 一 张 图 
片 是 要 使 用 的 原 图 ， 第 二 张 图 片 是 绘制 的 图 片 ， 显 示 在 画布 之 中 。 

提示 : 通过 drawImage(image,dx,dy) 方 法 绘制 图 片 时 ， 如 果 图 片 的 高 度 小 于 或 等 于 画布 的 高 度 ， 那 么 绘 
制 时 图 片 正常 显示 。 如 果 图 片 的 高 度 大 于 画布 的 高 度 ， 那 么 将 会 绘制 图 片 的 一 部 分 。 
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Ee 革 





[9 


(DE Me///C/Users/qlangu/Documents/ 王 ND» 
闪 旺 让 加 NE 广 沁 # 全 关于 上 省 目下 加 Dean 





要 使 用 的 图 片 : 


人 














图 5-14 绘制 图 片 1 
2. drawlmage(image,dx,dy,width,height) 

















宽度 ， 然 后 把 该 图 片 画 到 canvas 上 的 (dx,dy) 位 置 处 。 


【 例 5-15】 “实例 文件 ，ch05\Chap5.15.html》 绘 制图 片 2。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 绘 制图 片 </title> 
<style> 
#rgbaLl { 
width:300px; 
height:200px; 
font-size:14px; 
color:#000; 
margin-left:20px; 
} 
</style> 
</head> 
<body> 
<div id="smiddle"> 
<article> 
<p> 要 使 用 的 图 片 :</p> 
<img src="01.jpg" id="img"> 
<canvas id="MyCanvas”width="400” height="300"> 当 前 浏览 器 不 支持 canvas 元 素 </canvas> 
</article> 
<script> 
window.onload=function(){ 
Var canvas=document .getElementById ("MyCanvas"); 
if(canvas.getContext){ 
Var context=canvas.getContext ("2d"); 
Var image=document .getElementById("img"); 
context .drawImage (image, 0,0,300,250); 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap5.15.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 5-15 所 示 。 第 一 张 图 


























与 上 一 个 方法 相 比 ， 该 方法 多 出 了 两 个 参数 ， 一 个 是 高 度 ， 一 个 是 宽度 ， 用 于 设置 绘制 图 片 的 高 度 与 





是 要 使 用 的 原 图 ， 第 二 张 图 片 是 绘制 的 图 片 ， 显 示 在 画布 中 ， 与 原 图 片 相 比 ， 可 以 看 到 绘制 图 片 的 高 度 





























宽度 都 发 生 了 改变 。 
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eT x 
CG 人 Wey1CyUsersyqlangu/Doaumenty8E 。 … 位 QL 着 mi» 3 
| 闪 量 SW 有 加 XHKS 方 站 国 亲 于- 第 加 宇和 国字 有 坟 口 夺 动 白 书 和 
要 使 用 的 图片 : 


& 

















5-15 ”绘制 图 片 2 


3. drawlmage(img,sx,sy,swidth,sheight, dx,dy,width,height) 

在 画布 中 绘制 一 个 图 片 ， 通 过 参数 (sx,sy,swidth,sheight〉 指 定 图 片 裁剪 的 范围 ， 缩 放 到 (width,height) 
大 小 ， 最 后 把 它 画 到 canvas 上 的 (dx,dy) 位 置 。 

【 例 5-16】 〈 实 例文 件 ，ch05\Chap5.16.html) 绘制 图 片 3。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 绘 制图 片 </title> 

<style> 

#rgbaLl { 
width:300px; 
height:200px; 
font-size:14px; 
color:#000; 
margin-left:20px; 





上 
</style> 
</head> 
<body> 
<div id="smiddle"> 
<article> 
<p> 要 使 用 的 图 片 :</p> 
<img src="01.jpg" id="img"> 
<canvas id="MyCanvas"” width="400" height="300"> 当 前 浏览 器 不 支持 canvas 元 素 </canvas> 
</article> 
<script> 
window.onload=function(){ 
Var canvas=document .getElementById ("MyCanvas"); 
if (canvas.getContext){ 
Var context=canvas.getContext ("2d"); 
Var image=document .getElementById("img"); 
context .drawImage (image, 60, 60, 400, 300,0,0,400,300); 
1 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap5.16.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 5-16 所 示 。 第 一 张 
片 是 要 使 用 的 原 图 ， 第 二 张 图 片 是 绘制 的 图 片 ， 显 示 在 画布 之 中 ， 与 原 图 相 比 ， 可 以 看 到 绘制 图 片 的 高 
与 宽度 都 发 生 了 改变 ， 并 且 图 片 的 一 部 分 被 剪裁 掉 了 。 
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5.5.2 平 铺 图 片 
py 
createPattern() 方 法 表示 在 指定 的 方向 上 重复 指定 元 素 ， 该 方法 通常 用 于 平 铺 图 片 ， 基本 语法 格式 “ 








语 
到 


如 下 : 


context. 

















第 贺 章 使 用 HTML 5 绘制 移动 页 面 元 素 
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要 使 用 的 图 片 : 














5-16 ”绘制 图 片 3 





createPattern (image, "repeat |repeat-x|repeat-y|lno-repeat"); 


使 用 createPattermm0 方 法 需要 传 入 两 个 参数 ， 第 一 个 参数 指定 使 用 的 图 片 或 视频 等 元 素 ， 第 二 个 参数 指 


定 平 铺 的 方法 ， 具 体 取 值 参数 说 明 如 表 5-8 所 示 。 


表 5-8 参数 说 明 

















参数 描述 
Image 规定 要 使 用 的 模式 的 图 片 、 画 布 或 视频 元 素 
Repeat 默认 。 该 模式 在 水 平和 垂直 方向 重复 
Tepeat-x 该 模式 只 在 水 平方 向 重复 
repeat-y 该 模式 只 在 垂直 方向 重复 
no-repeat 该 模式 只 显示 一 次 (不 重复 ) 
【 例 5-17】“〈 实 例文 件 ，ch05\Chap5.17.html) 平 铺 图 片 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<title> 平 铺 图 片 </title> 
</head> 
<body> 
<p> 图 片 应 用 :</p> 
<img src="02.jpg" id="lamp"> 
<p> 画 布 :</p> 
<button onclick="draw('repeat')"> 重 复 </button> 
<button onclick="draw('repeat-x') "> 重复-x</button> 
<button onclick="draw('repeat-y') "> 重复 -y</button> 
<button onclick="draw('no-repeat')"> 不 重复 </button> </br> 
<canvas id="myCanvas" width="400" height="320" style="border:1px solid #d3d3d3;"></canvas> 
<script> 
function draw (direction) 


{ 
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NA 


Var 
var 
ctx. 
var 
var 
ctx. 
ctx. 
ctx. 


ctx=c.getContext ("2d"); 


rect (0,0,400,320); 
fillstyle=pat; 
ER 

} 

</script> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap5.17.html 文件 ， 在 正 浏览 器 中 可 以 查看 运行 结 
”按钮 、“ 重 复 -x” 按 钮 、“ 重 复 -y” 按 钮 、“ 不 重复 ”按钮 ， 可 以 分 别 查 询 平 铺 图 片 的 效果 ， 分 











图 5-18 一 图 5-21 所 示 。 


c=document .getElementById ("myCanvas"); 


clearRect (0,0,c.width,c.height); 
img=document .getElementById ("lamp") 
pat=ctx.createPattern (img,direction); 
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5-17 所 示 。 通 过 
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5.5.3 ”裁剪 图 片 


clip() 方 法 表示 从 原始 画布 中 剪 切 任意 形状 和 尺寸 ， 一 旦 剪 切 了 某 个 区 域 ， 则 所 有 之 后 的 绘 
制 在 剪 切 过 的 区 域内 ， 而 且 不 能 访问 画布 上 的 其 他 区 域 。 为 了 解决 这 一 问题 ， 开 发 者 可 以 在 使 
之 前 ， 通 过 save 方法 对 当前 画布 区 域 进行 保存 ， 并 在 以 后 的 任意 时 间 对 其 进行 恢复 ， 恢 复 的 方法 是 
Testore() 方 法 。 


【 例 5-18】 “〈 实 例文 件 ， ch0S\Chap5.18.html) 裁剪 图 片 。 代 码 如 下 : 


!DOCTYPE html> 

<html> 

<head> 

<title> 图 片 裁剪 </title> 

<style> 

#rgbaLl { 
width:300px; 
height:200px; 
font-size:14px; 
color:#000; 
margin-left:20px; 





































































































} 
</style> 
</head> 
<body> 
<article> 
<img src="03.jpg" width="350" height="300"> 
<canvas id="MyCanvas"” width="350"” height="300"> 当 前 浏览 器 不 支持 canvas 元 素 </canvas> 
</article> 
<script> 
window.onload=function(){ 
Var canvas=document .getElementById ("MyCanvas"); 
if (canvas.getContext){ 
Var context=canvas.getContext ("2d"); 
context .fillstyle="white"; 
context.fillRect (0, 0, 350, 300); 
image=new Image(); 
image.onload=function () { 
drawImg (context, image); 
} 


image.src="03.jpg"; 


function drawImg (context, image) { 
create5StarClip (context); 
context .drawImage (image,0,0); 
} 
function create5StarClip (context) { 
Var n=0,dx=180,dy=135,s=150; 
context .beginPath(); 
Var x=Math.sin(0); 
Var y=Math.cos(0); 
Var dig=Math.PI / 5* 4; 
for (var i=0; i < 5; i++) { 
Var x=Math.sin(i * dig); 
var y=Math.cos(i * dig); 
context.lineTo(dx + x *s, dy +y* 3s); 








context.closePath(); 
context .clip(); 
| 
</script> 
</body> 
</html> 
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相关 的 代码 实例 可 参考 Chap5.18.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 5-22 所 示 。 在 显示 页 
面 上 绘制 一 个 5 边 形 ， 图 片 作为 5 边 形 的 背景 显示 ， 从 而 实现 对 对 象 图 片 的 裁剪 。 
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5-22 ” 栽 剪 图 片 








图 像 是 由 一 个 个 像素 点 组 成 的 ， 在 画布 中 ， 可 以 使 用 ImageData 对 象 来 保存 图 像 像素 值 ， 它 有 width、 
height 和 data 3 个 属性 ， 其 中 data 属性 就 是 一 个 连续 数组 ， 图 像 的 所 有 像素 值 其 实 是 保存 在 data 里 面 的 。 
data 属性 保存 像素 值 的 方法 如 下 : 


imageData.data[index*4 +0] 
imageData.data[index*4 +1] 
imageData.data[index*4 +2] 
imageData.data[index*4 +3] 


上 面 取出 了 data 数组 中 连续 相 邻 的 4 个 值 ， 这 4 个 值 分 别 代 表 了 图 像 中 第 index+1 个 像素 的 红色 、 绿 
色 、 蓝 色 和 透明 度 值 的 大 小 。 需 要 注意 的 是 index 从 0 开始 ， 图 像 中 总 共有 width x height 个 像素 ， 数 组 中 
总 共 保 存 了 width x height x 4 个 数值 。 

画布 对 象 有 3 个 方法 用 来 创建 、 读 取 和 设置 ImageData 对 象 ， 如 表 5-9 所 示 。 
































表 5-9 创建 、 读 取 与 设置 ImageData 对 象 的 方法 
方 ”法 说 明 


在 内 存 中 创建 一 个 指定 大 小 的 ImageData 对 象 ( 即 像素 数组 ), 对 象 中 的 像素 点 
都 是 黑色 透明 的 ， 即 rgba(0.0.0.0) 


返回 一 个 ImageData 对 象 ， 这 个 IamgeData 对 象 中 包含 了 指定 区 域 的 像素 数组 
putImageData(data,x,y) 将 ImageData 对 象 绘制 到 屏幕 的 指定 区 域 上 
【 例 5-19】 实例 文件 ，ch05\Chap5.19.html) 像素 化 处 理 图 片 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 像 素 化 处 理 </title> 
</head> 

<body onload="draw('canvas');"> 
<h1> 像 素 化 处 理 图 片 </h1> 


<canvas id="canvas" width="400" height="300"></canvas> 





createImageData(width.height) 








getImageData(x.y,width,height) 























<script> 
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function draw (id){ 
var canvas=document .getElementById (id); 
if(canvas==nul11) { 

return false; 
:| 
var context=canvas.getContext ('2d'); 
image=new Image(); 
image.src="01.jpg"; 
image.onload=function (){ 
context .drawImage (image,0,0); 
var imagedata=context .getImageData (0,0, image.width, 
image.height); 
for (var i=0,n=imagedata.data.length;i<n;i+=4){ 所 © © Mme//C/Users/qlan 安 » 三 
imagedata.data[i+0]=255-imagedata.data[i+0]; 六 国力 村 站 Ww 
imagedata.data[i+1]=255-imagedata.data[i+2]; ga 
a -data[i+2] Be .data[i+1]; 像素 化 处 理 图 片 





} 
context .putImageData (imagedata, 0,0); 


1 
} 

</script> 

</body> 

</html> 

相关 的 代码 实例 可 参考 Chap5.19.html 文件 ， 在 Firefox 浏览 器 中 
运行 的 结果 如 图 5-23 所 示 ， 可 以 看 到 ， 在 页 面 上 显示 了 一 个 图 像 ， 其 5-23 ”像素 化 处 理 后 的 图 片 
图 像 明 显 经 过 像素 化 处 理 。 














5.6 ”绘制 文本 元 素 


文本 是 用 户 在 页 面 中 最 常见 的 内 容 , 通过 上 下 文 对 象 提供 的 属性 和 方法 可 以 绘制 出 指定 的 文本 信息 ， 
就 来 介绍 绘制 文本 元 素 的 方法 。 


5.6.1 绘制 普通 文字 


在 画布 中 绘制 文本 ， 需 要 使 用 到 上 下 文 对 象 中 的 属性 和 方法 ， 通 过 属性 可 以 设置 文本 的 字体 样式 和 对 
齐 方式 等 信息 ， 最 常用 的 属性 如 表 5-10 所 示 。 























下 


村 






































表 5-10 ”绘制 文字 时 的 属性 
































属性 名 | 描 述 
font | 设置 或 返回 文本 内 容 的 当前 字体 ， 包 括 字体 样式 、 字 体 变 种 、 字 体 大 小 与 粗细 、 行 高 和 字体 名 称 
textAlign | 设置 或 返回 文本 内 容 的 当前 对 齐 方式 ， 其 属性 值 可 以 是 start (默认 的 )、end、left、right 和 center 
设置 或 返回 在 绘制 文本 时 使 用 的 当前 文本 基线 ， 其 属性 值 可 以 是 top、hanging、middle、alphabetic、 

















textBaseline 








ideographic 和 bottom。 对 于 简单 的 英文 字母 ， 可 以 放心 地 使 用 top、middle 或 bottom 作为 文本 基线 




















了 解 了 绘制 文字 时 的 属性 ， 下 面 介绍 绘制 文字 的 方法 ，Web 开发 者 可 以 通过 3 种 方法 绘制 文本 ， 如 表 
5-11 所 示 。 
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表 5-11 绘制 文字 的 3 种 方法 
1 描述 


绘制 带 fnlstyle 填充 的 文字 ， 文 本 参数 以 及 用 于 指定 文本 位 置 的 坐标 参数 。 
maxwidth 是 可 选 参数 ， 用 于 限制 字体 大 小 ， 它 会 将 文本 字体 强制 收缩 到 指定 尺寸 


strokeText(text,x,y,maxwidth) | 绘制 只 有 strokeStyle 边框 的 文字 ， 其 参数 含义 和 上 一 个 方法 相同 
一 个 度量 对 象 , 其 包含 了 在 当前 context 环境 下 指定 文本 的 实际 显示 宽度 


【 例 5-20】 实例 文件 ，ch05\Chap5.20.html) 绘制 普通 文本 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>Canvas</title> 
</head> 
<body> 
<canvas id="my_ canvas" width="200" height="200" style="border:1lpx solid #ff0000"></canvas> 
<script type="text/javascript"> 
Var elem=document .getElementById ("my canvas"); 
if (elem && elem.getContext) { 
var context=elem.getContext ("2d"); 
context.fillstyle ="#00f'; 
//font: 文 字 字 体 , 同 CSSfont-family 属性 
context .font='italic 30px 微软 雅 黑 '; // 射 体 30px 微软 雅 黑 字体 
//textAlign: 文 字 水 平 对 齐 方 式 .可 取 属 性 值 :start，end，left, right，center .默认 值 :start. 
context.textAlign="'left'; 
// 文 字 竖 直 对 齐 方式 .可 取 属 性 值 :top,，hanging, middle,alphabetic，ideographic，bottom. 默 认 
值 :alphabetic 
context .textBaseline='top'; 
// 要 输出 的 文字 内 容 ,文字 位 置 坐标 ， 第 四 个 参数 为 可 选 选 项 一 一 最 大 宽度 .如果 需要 的 话 ,浏览 器 会 缩减 文字 以 
让 它 适 应 指定 宽度 
context .fillText (' 春 花 秋月 何 时 了 !'，0，0,180); // 有 填充 
context .font ="bold 30px sans-serif'; 
context .strokeText (' 春 花 秋月 何 时 了 !'，0，50,180); // 只 有 文字 边框 


} 
</script> 
</body> 


</html> 
Fr © © fleWcyuse » 三 
相关 的 代码 实例 可 参考 Chap5.20.html 文件 ， 在 Firefox 浏览 器 中 起 是 癌 Deatkt 和 


运行 的 结果 如 图 5-24 所 示 ， 在 页 面 上 显示 了 一 个 画布 边框 ， 画 布 中 
显示 了 两 行 不 同 的 文字 ， 第 一 行文 字 以 斜体 显示 ， 颜 色 为 蓝 色 ， 第 二 
行文 字 以 加 粗 样式 显示 ， 颜 色 为 黑色 。 


5.6.2 ”绘制 阴影 文本 


上 下 文 对 象 提供 了 一 系列 与 阴影 有 关 的 属性 ,通过 这 些 属性 , 不 
仅 可 以 绘制 文本 的 阴影 效果 ， 还 可 以 绘制 图 形 的 阴影 效果 。 绘制 阴影 
文本 的 属性 如 表 5-12 所 示 。 








fillText(text,x,y.maxwidth) 

















可 


measureText() 该 会 返 















































5-24 ”绘制 普通 文本 

















表 5-12 绘制 阴影 文本 的 属性 


属性 名 描 述 
shadowColor 设置 或 返回 用 于 阴影 的 颜色 











器 
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续 表 





















shadowBlur 设置 或 返回 用 于 阴影 的 模糊 级 别 
shadowOffsetX 设置 或 返回 阴影 与 形状 的 水 平 距离 














shadowOffsetY 











阴影 与 形状 的 垂直 距离 





【 例 5-21】 (实例 文件 ， ch05\Chap5.21html) 绘制 阴影 文本 。 代 码 如 下 : 


<!DOCTYPE html> 


<html> 
<head> 


<title> 绘 制 阴影 文本 </title> 


<style> 
#rgbaLl { 


width:300px; 





margin-left:20px; 


} 
</style> 
</head> 
<body> 


<div id="smiddle"> 


<article> 
<hl></hl> 
<p> </p> 


<canvas id="MyCanvas"” width="720”height="300"> 当 前 浏览 器 不 支持 canvas 元 素 </canvas> 


</article> 
<script> 


window.onload=function(){ 


var title=" 


《 早 发 白 帝 城 》" 


Var canvas=document .getElementById ("MyCanvas"); 
if (canvas.getContext){ 
Var context=canvas.getContext ("2d"); 


context. 
context. 
context. 
context. 
context. 
context. 
context. 


font="italic 20px sans-serif"; 
strokeSstyle="#43CD80"; 
shadowColor="blue"; 
shadowBlur=1; 

shadowOffsetX=2; 
shadowOffsetY=-2; 

fillText (title, 200, 30); 








// 绘 制 诗歌 作者 内 容 


context. 
context. 
context. 
context. 
context. 
context. 
context. 
context. 


font="italic 18px sans-serif"; 
fillstyle="blue"; 
textBaseline="bottom"; 
shadowColor="#EE1289"; 
shadowBlur: 
shadowOffset. 
shadowOffsetY=2; 

fillText (" (作者 :李白 ) ",340,30); 





/ /绘制 诗歌 内 容 


context. 
context. 
context. 
context. 
context. 
context. 
context. 


font="30px 隶书 "; 
fillStyle="#404040"; 
shadowColor="#43CD80"; 
shadowBlur=3; 
shadowOffsetX=-2; 
shadowOffsetY=-2; 


fillText (" 朝 辞 白 帝 彩 云 间 ,",160,70); 
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ND 
context .fillText ("千里 江陵 一 日 还 .",160,90); 
context .fillText ("两 岸 狼 声 啼 不 住 , ", 160,110); <e)> e omeycvuser 全 和 
context .fillText ("轻舟 已 过 万 重山 .",160,130); 次 最 二 访 癌 - 国 火 也 有 六 站 点 莉 新 手 F: 短 阔 口 称 汉 书香 
} l (EEE (1 :BE ) 
</script> 朝 辞 白 帝 彩云 间 ， 
</div> Ed 过 县 丛 。 
</body> 双关 ni 
</html> 


相关 的 代码 实例 可 参考 Chap5.21.html 文件 ， 在 Firefox 浏览 器 中 








运行 的 结果 如 图 5-25 所 示 。 图 5-25 绘制 阴影 文本 











动 的 页 面 时 钟 。 
5.7.1 了 解 动画 





为 了 


5.7 ”绘制 动画 特效 


使 用 canvas 与 JavaScript 不 仅 可 以 绘制 静态 文本 ， 还 可 以 绘制 动画 特效 ， 如 动态 闪 动 的 线条 、 可 以 走 
































于 使 用 JavaScript 脚本 操作 canvas， 因 此 ， 要 实现 一 些 交互 动画 是 很 容易 的 ， 只 不 过 canvas 并 非 是 
绘制 动画 而 出 现 的 , 因此 没有 动画 制作 中 帧 的 概念 。 不 过 , 使 用 JavaScript 中 的 定时 器 不 断 地 绘制 canvas 




















画面 





， 就 可 以 实现 动画 特效 了 。 








JavaScript 中 的 setInterval(code,millisec) 方 法 可 以 按照 指定 的 时 间 间 隔 millisec 来 反复 调用 code 所 指向 


的 函数 或 者 代码 串 ， 基 本 语法 结构 如 下 : 


setInterval (code, millisec); 


上 述 语法 中 ，code 参数 表示 要 调用 一 个 代码 串 , 也 可 以 是 一 个 函数 ，millisec 参数 表示 周期 性 执行 或 调 


用 code 之 间 的 时 间 间 隔 ， 以 毫秒 计 。 这 样 ， 通 过 将 绘图 函数 作为 第 一 个 参数 传 给 setInterval0 方 法 ， 在 每 次 
被 调用 的 过 程 中 移动 画面 中 图 形 的 位 置 ， 来 最 终 实现 动画 特效 。 




















5.7.2 ”绘制 动态 闪 动 线条 


JavaScript 的 功能 非常 强大 ， 下 面 利用 canvas 元 素 、 上 下 文 对 象 以 及 setInterval0 方 法 绘制 动态 线条 ， 


线条 的 颜色 随机 设置 。 
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【 例 5-22】 实例 文件 ，ch05\Chap5.22.html》 绘 制 动 态 闪 动 线条 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<title> 绘 制 动 态 线条 </title> 

<style> 

#rgbaLl { 
width:300px; 
height:200px; 
font-size:14px; 
color:#000; 
margin-left:20px; 

} 

</style> 

</head> 


第 贺 章 使 用 HTML 5 绘制 移动 页 面 元 素 


<body> 
<div id="smiddle"> 
<article> 
<center> 
<canvas id="MyCanvas"” width="400"”height="400" style="border:5px red solid"> 当 前 浏览 器 不 支持 
canvas 元 素 </canvas> 
</center> 
</article> 
<script> 
var mycanvas =document .getElementById ("MyCanvas"); 
if (mycanvas.getContext){ 
var mycontext=mycanvas.getContext ("2d"); 
Var XryrX2vy2,rrgrb7 
function line() { 
x=Math.floor (Math.random()*190) + Math.floor (Math.random()*190); 
y=Math.floor (Math.random()*190) + Math.floor(Math.random()*190); 
x2=Math.floor (Math.random()*190) + Math.floor (Math.random()*190); 
Y2=Math.floor (Math.random()*190) + Math.floor (Math.random()*190); 
r=Math.floor (Math.random()*255); 
g=Math.floor (Math.random()*255); 
b=Math.floor (Math.random()*255)7 


mycontext .moveTo (x, y); // 原 点 
mycontext .lineTo (x2, y2); // 目 标点 
mycontext .strokeStyle='rgb(' +r+', +g+ ,+b+")'; 


mycontext.lineWidth=Math.floor (Math.random()*6); 

mycontext .stroke (); 

mycontext.restore(); 国 -… 
} CG OD fey/cyUsers/qiang 站 二 
闻 最 沪 同 加 淡 风 记 访 站 贞 芒 新 于 上 地 » 6 动 E 和 


u 

setInterval (line, 500); 
</script> 

</div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap5.22.html 文件 , 在 Firefox 浏览 器 中 
运行 的 结果 如 图 5-26 所 示 。 


5.7.3 ”绘制 动态 页 面 时 钟 


使 用 JavaScript 技术 和 HTML 5 中 新 增 的 画布 canvas 可 以 轻松 制 
作 动态 页 面 时 钟 特 效 。 在 画布 上 绘制 时 钟 ， 需 要 绘制 表盘 、 时 针 、 分 
针 、 秒 针 和 中 心 圆 等 图 形 ， 然 后 将 这 几 个 图 形 组 合 起 来 ， 构 成 一 个 时 图 5-26 绘制 动态 闪 动 线条 
针 界 面 ， 最 后 使 用 JavaScript 代码 根据 时 间 确 定 秒针 、 分 针 和 时 针 。 

【 例 5-23】〔 实 例文 件 ，ch05\Chap5.23.html》 绘 制 动 态 页 面 时 钟 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 制 作 动 态 页 面 时 钟 </title> 
</head> 
<body> 
<canvas id="canvas"” width="200"” height="200"” style="border:lpx solid #000;"> 您 的 浏览 器 不 支持 
canvas.</canvas> 
<script type="text/javascript" language="javascript" charset="utf-8"> 
Var canvas=document .getElementById('canvas'); 
var ctx=canvas.getContext ('2d'); 
if(ctx){ 
Var timerIdz 
Var frameRate=60; 




















加 
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相关 的 代码 实例 可 参考 制作 Chap5.23.html 文件 ， 然 后 双击 该 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 
图 5-27 所 示 ， 可 以 看 到 页 面 中 出 现 了 一 个 时 钟 ， 其 秒针 在 不 停 地 移动 。 


EE 


© © fle///CUse “和 » 三 
次 最 军 访 问 国 火狐 祝 方 站 点 » 口交 动 所 答 























5-27 ”绘制 动态 页 面 时 钟 


5.8 典型 案例 一 一 绘制 移动 页 面 素材 


漫画 中 最 常见 的 一 种 图 形 ， 就 是 火柴 棒 人 ， 通 过 简单 的 几 个 笔画 ， 就 可 以 绘制 一 个 传神 的 动漫 人 物 。 
使 用 canvas 和 JavaScript 同样 可 以 绘制 一 个 火柴 棒 人 物 。 具 体操 作 步 骤 如 下 。 
步骤 1: 分 析 需 求 。 
一 个 火柴 棒 人 ， 由 下 面 几 个 部 分 组 成 ， 一 个 脸 部 ， 一 个 是 身躯 。 脸 部 是 一 个 圆 形 ， 其 中 包括 眼睛 和 嘴 ; 
身 身 是 几 条 直线 组 成 ， 包 括 手 和 腿 等 。 实 际 上 此 案例 就 是 绘制 圆 形 、 弧 度 和 直线 的 组 合 。 实 例 完成 后 ， 效 
果 如 图 5-28 所 示 。 

步骤 2: 实现 HTML 页 面 ， 定 义 画 布 canvas。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<tit1le> 绘 制 火 柴 棒 人 </title> 

<body> 

<canvas id="myCanvas" width="500" height="300" style="border:lpx solid blue"> 
</canvas> 

</body> 

</html> 


在 正 中 浏览 效果 如 图 5-29 所 示 ， 页 面 显 示 了 一 个 画布 边框 。 
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图 5-28 火柴 棒 人 图 5-29 ”定义 画布 边框 
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第 贺 章 使 用 HTML 5 绘制 移动 页 面 元 素 


步骤 3: 实现 头 部 轮廓 绘制 。 代 码 如 下 : 


<script type="text/javascript"> 

var c=document .getElementById("myCanvas"); 
var cxt=c.getContext ("2d"); 

cxt .beginPath () 7 
cxt.arc(100,50,30,0,Math.PI*2,true); 

cxt .fill(); 

</script> 


这 会 产生 一 个 实心 的 、 填 充 的 头 部 ， 即 圆 形 。 在 arc 函数 中 , x 和 y 的 坐标 为 (100，50)， 半 径 为 30px， 
个 参数 的 弧度 为 弧度 的 开始 和 结束 ， 第 6 个 参数 表示 绘制 弧 形 的 方向 ， 即 顺 时 针 和 逆 时 针 方 向 。 

在 正 中 浏览 效果 如 图 5-30 所 示 ， 页 面 显示 了 实心 圆 ， 其 颜色 为 黑色 。 

步骤 4: JS 绘制 笑脸 。 代 码 如 下 : 


cxt .beginPath () 7 
cxt.strokeStyle="'#c00'; 

cxt .lineWidth=3; 
cxt.arc(100,50,20,0,Math.PI, false); 
cxt.stroke(); 


此 处 使 用 beginPath 方法 ， 表 示 重 新 绘制 ， 并 设 定 线条 宽度 ， 然 后 绘制 了 一 个 弧 形 ， 这 个 弧 形 是 从 嘴 部 








开始 的 弧 形 。 


在 正 浏 览 器 中 浏览 效果 如 图 5-31 所 示 ， 页 面 上 显示 了 一 个 漂亮 的 半圆 式 的 笑脸 。 
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图 5-30 ”绘制 头 部 轮廓 图 5-31 绘制 笑脸 
步骤 5: JS 绘制 眼睛 。 代 码 如 下 : 


cxt .beginPath(); 

cxt .fillstyle="#c00"; 
cxt.arc(90,45,3,0,Math.PI*2,true); 
cxt.fill(); 

cxt .moveTo (113,45); 
cxt.arc(110,45,3,0,Math.PI*2, true); 
cxt .fill(); 

cxt.stroke (); 


首先 填充 弧 线 ， 创 建 了 一 个 实体 样式 的 眼睛 ，arc 绘制 左 眼 ， 然 后 使 用 moveto 绘制 右 眼 。 在 正 中 浏览 





效果 如 图 5-32 所 示 ， 页 面 显示 了 一 双眼 睛 。 














步骤 6: 绘制 身躯 。 代 码 如 下 : 


Cxt .moveTo (100,80) 7 
cxt.lineTo(100,150); 
cxt .moveTo (100,100), 
cxt .lineTo(60,120); 
cxt.moveTo(100,100); 
cxt.lineTo(140,120); 
cxt.moveTo (100,150) > 
cxt.lineTo(80,190); 
cxt.moveTo(100,150); 
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cxt.lineTo(140,190); 
cxt.stroke (); 


上 面 代码 以 moveTo 作为 开始 坐标 ， 以 lineTo 为 终点 ， 绘 制 不 同 的 直线 ， 这 些 直 线 的 坐标 位 置 需要 在 
不 同 地 方 汇 集 ， 两 只 手 在 坐标 位 置 (100，100) 交叉 ， 两 只 脚 在 坐标 位 置 (100，150) 交叉 。 
在 正 浏 览 器 中 浏览 效果 如 图 5-33 所 示 ， 页 面 显 示 了 一 个 火柴 棒 人 ， 相 比较 上 一 个 图 形 ， 多 了 一 个 身 身 。 
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图 5-32 绘制 眼睛 图 5-33 定义 身躯 


5.9 “就业 面试 技巧 与 解析 


5.9.1 面试 技巧 与 解析 (一) 


面试 官 : 画布 中 stroke 和 fill 二 者 的 区 别 是 什么 ? 

应 聘 者 : HTML 5 中 将 图 形 分 为 两 大 类 : 第 一 类 称 作 Stroke， 就 是 轮廓 、 勾 勒 或 者 线条 ， 总 之 ， 图 形 是 
由 线条 组 成 的 ; 第 二 类 称 作 Fil， 就 是 填充 区 域 。 上 下 文 对象 中 有 两 个 绘制 矩形 的 方法 ， 可 以 让 我 们 很 好 的 
理解 这 两 大 类 图 形 的 区 别 : 一 个 是 strokeRect， 还 有 一 个 是 fillRect。 


5.9.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : 定义 canvas 宽度 和 高 度 时 ， 是 否 可 以 在 CSS 属性 中 定义 呀 ? 

应 聘 者 : 在 添加 一 个 canvas 标签 的 时 候 ， 会 在 canvas 的 属性 里 填写 要 初始 化 的 canvas 的 高 度 和 宽度 ， 
代码 如 下 : 

<canvas width="500" height="400">Not Supported!</canvas> 

如 果 把 高 度 和 宽度 写 在 了 CSS 里 面 ， 结 果 发 现在 绘图 的 时 候 坐标 获取 出 现 差异 ，canvas.width 和 
canvas.height 分 别 是 300 和 150， 和 预期 的 不 一 样 。 这 是 因为 canvas 要 求 这 两 个 属性 必须 与 canvas 标记 一 
起 出 现 。 
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SP 学 习 指引 


使 用 CSS 技术 可 以 对 文档 进行 精细 的 页 面 美化 ， 它 不 仅 可 以 对 单个 页 面 进 行 格 式 化 ， 还 可 以 对 多 个 页 
面 使 用 相同 的 样式 进行 修饰 ， 以 达到 统一 的 效果 。 本 章 将 详细 介绍 CSS 3 基础 知识 ， 主 要 内 容 包 括 CSS 3 
的 语法 结构 、 编 写 方法 、 选 择 器 的 应 用 以 及 在 网 页 中 调用 CSS 样式 的 方法 


”重点 导读 


.掌握 CSS 3 的 核心 概念 。 
“掌握 CSS 3 选择 器 的 应 用 。 
。 掌 握 调 用 CSS 3 的 方式 。 
*。 掌握 代码 结构 编写 规范 。 





6.1 CSS 3 简介 


CSS 是 英文 Cascading Style Sheets( 层 芭 样 式 表 单 ) 的 缩写 ， 通 常 又 称 为 “风格 样式 表 (Style Sheet)” 
或 级 联 样式 表 ， 它 是 用 来 进行 页 面 风格 设计 的 。 给 页 面 添加 CSS， 最 大 的 优势 就 是 在 后 期 维护 中 只 需要 修 
改 代码 即 可 。 具 体 来 讲 ，CSS 3 的 作用 有 以 下 几 个 方面 。 

。 在 几乎 所 有 的 浏览 器 上 都 可 以 使 用 。 

。 以 前 一 些 必须 通过 图 片 转换 才能 实现 的 功能 ,现在 只 要 用 CSS 3 就 可 以 轻松 实现 ， 从 而 更 快 地 下 载 

页 面 。 

。 使 页 面 的 字体 变 得 更 漂亮 ， 更 容易 编排 ， 使 页 面 真正 赏心悦目 。 

。 用 户 可 以 轻松 地 控制 页 面 的 布局 。 

。 用 户 可 以 将 许多 网 页 的 风格 格式 同时 更 新 ， 不 用 再 一 页 一 页 地 更 新 了 。 

。 用户 可 以 将 站 点 上 所 有 的 网 页 风格 都 使 用 一 个 CSS 文件 进行 控制 ， 只 要 修改 这 个 CSS 文件 中 相应 

的 行 ， 那 么 整个 站 点 的 页 面 都 会 随 之 发 生变 动 。 
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6.2 CSS 3 的 核心 概念 


在 网 页 中 加 入 CSS 样式 的 目的 是 将 网 页 结构 代码 与 网 页 格式 风格 代码 分 离开 来 ， 从 而 使 网 页 设计 者 可 
以 对 网 页 的 布局 进行 更 多 的 控制 。 


家 6.2.1 CSS 3 的 语法 结构 











































CSS 3 的 语法 非常 简单 , 这 也 是 其 深 受 用 户 喜 爱 和 被 广泛 应 secw Daa ear 
的 原因 。CSS 3 语法 规则 由 两 个 主要 的 部 分 构成 ,分 别 是 选择 hn1) {color:blue; font-size: 12px;} 
器 ， 以 及 一 条 或 多 条 声明 ， 具 体 语法 结构 如 图 6-1 所 示 。 property Value Property volue 
选择 器 通常 是 用 户 需 要 改变 样式 的 HTML 元 素 ， 其 直接 与 
HTML 代码 对 应 , 声明 (declaration ) 非常 人 性 化 。 属 性 (property) 6-1 CSS 3 语法 结构 








是 用 户 希 望 设置 的 样式 属性 (style attribute)， 绝 大 部 分 属性 名 都 
是 有 含义 的 英文 单词 或 词组 ， 每 个 属性 对 应 一 个 值 ， 属 性 值 大 部 分 也 是 直接 用 有 意义 的 单词 表示 ， 例 如 颜 
色 值 可 以 取 yellow、red 和 orange， 预 设 的 border 样式 有 solid 和 dashed， 属 性 和 值 之 间 用 冒号 分 开 。 

CSS 3 语法 具有 很 高 的 容错 性 ， 即 一 条 错误 的 语句 并 不 会 影响 之 后 语句 的 解析 。 例 如 以 下 代码 : 









































<style> 

hli 
color:blue /* 这 里 没有 分 号 , 导致 语法 错误 */ 
font-size:20px /* 这 条 声明 不 会 被 应 用 */ 

l 

h21 
-color:red; /* 对 于 不 识别 的 属性 名 , CSS 将 自动 息 略 */ 
font-size:22px; /* 前 面 的 错误 不 影响 这 条 声明 的 作用 */ 

} 

</style> 


注意 : 虽然 CSS 3 的 容错 性 非常 高 , 但 是 在 编写 的 过 程 中 也 要 注意 语法 错误 的 检查 , 用 户 可 以 使 用 CSS 
Lint、Dreamweaver 等 工具 来 检查 CSS 3 语法 格式 。 
加 
和 6.2.2 ” 盒 模型 





所 有 HTML 元 素 可 以 看 作 盒 子 , 在 CSS 3 中 , Box Model 这 一 术 
语 在 设计 和 布局 时 使 用 。CSS 3 盒 模型 本 质 上 是 一 个 盒子 ， 封 装 周围 。: Border 
的 HTML 元 素 ， 它 包括 边 距 、 边 框 、 填 充 和 实际 内 容 。 盒 模型 允许 ; 图 conient 
户 在 其 他 元 素 和 周围 元 素 边框 之 间 的 空间 放置 元 素 , 如 图 6-2 所 示 :图 
为 盒 模型 (Box Model) 示意 图 。 : ; 
盒 模 型 中 不 同 部 分 的 说 明 : | 和 ww : 
。 Margin (外边 距 )， 清除 边框 外 的 区 域 ， 外 边 距 是 透明 的 。 图 6-2 盒 模 型 (Box Model) 示意 图 
。 Border (边框 ):， 围绕 在 内 边 距 和 内 容 外 的 边框 。 
。 Padding (内 边 距 ): 清除 内 容 周围 的 区 域 ， 内 边 距 是 透明 的 。 
。 Content (内容 ): 盒子 的 内 容 ， 显 示 文本 和 图 像 。 
为 了 正确 设置 元 素 在 所 有 浏览 器 中 的 宽度 和 高 度 ， 用 户 需要 知道 盒 模型 是 如 何 工作 的 。 下 面 介 绍 计算 
盒 模型 高 度 与 宽度 的 方法 。 


~ Margin 
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【 例 6-1】 《实例 文件 : ch06\Chap6.1.html) 计算 盒 模型 的 总 宽度 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<tit1le> 计 算 盒 模型 的 宽度 </title> 
<style> 
div { 
background-color:lightgrey; 
width:300px; 
border:25px solid green; 
padding:25px; 
margin:25px; 
</style> 
</head> 
<body> 
<h2> 盒 模型 演示 </h2> 
<p>CSS 盒 模型 本 质 上 是 一 个 盒子 , 封装 周围 的 HTML 元素, 它 包 括 边 距 ,边框 ,填充 和 实际 内 容 .</P> 
<div> 这 里 是 盒子 内 的 实际 内 容 , 有 25px 内 间距 ,25px 外 间距 、25px 绿色 边框 .</div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap6.1.html 文件 ， 在 
Firefox 浏览 器 中 运行 的 结果 如 图 6-3 所 示 。 这 里 也 可 以 ES 




















自己 计算 : 300px( 宽 ) +50px ( 左 + 右 填 充 ) +50px ( 左 + no 个， 
右边 框 ) +$0px 〈 左 + 右边 距 ) =450px， 因 此 盒 模型 的 总 本 
宽度 为 450px。 例子 模 型 演示 | 
根据 上 面 的 计算 ， 可 以 得 出 计算 盒 模型 高 度 与 宽度 MS 
的 方法 : 
元 素 的 总 宽度 计算 公式 如 下 : a i 
总 元 素 的 宽度 -宽度 + 左 填充 + 右 填充 + 左边 框 + 右边 更 ，25Px 25p< 生 名 本 , 
框 + 左边 距 + 右边 距 














元 素 的 总 高 度 计 算 公 式 如 下 : 
元 素 的 总 高 度 = 高 度 + 顶部 填充 + 底部 填充 + 上 边框 + 
下 边框 + 上 边 距 + 下 边 距 


6.2.3 CSS 3 的 编写 方法 


CSS 3 是 纯 文本 格式 文件 ， 在 编写 CSS 3 时 ， 常 用 
的 编写 方法 有 两 种 ， 一 种 是 使 用 简单 纯 文本 编辑 工具 ， 2 a woe i 


如 记事 本 ， 另 一 种 是 使 用 专业 的 CSS 编辑 工具 ， 如 | htnl> 


6-3 ”计算 盒 模型 的 总 宽度 





















































<head> 
DreamweaverT。 <title> 使 用 记事 本 编写 C55</title> 
</head> 
<body> 
1. 使 用 记事 本 编写 CSS a 千 柑 万 树 各 花 开 。 这 句 使 用 ss 进行 了 修饰 。</p》 
</html> 














使 用 记事 本 编写 CSS， 首 先 打开 记事 本 ， 然 后 输入 
相应 CSS 代码 。 具 体 步骤 如 下 : 

(1) 打开 记事 本 ， 输 入 HTML 网 页 代码 ， 如 图 6-4 
所 示 。 

(2) 添加 CSS 代码 。 在 head 标记 中 间 添 加 CSS 样式 代码 ， 如 图 6-5 所 示 。 从 窗口 可 以 看 出 ， 在 head 标 





























图 6-4 记事 本 窗口 
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NA 


记 
中 显示 并 且 颜 色 为 红色 ， 如 图 6-5 所 示 。 





ph 间 ， 添 加 了 一 个 style 标记 ， 即 CSS 样式 标记 。 在 style 标记 中 间 ， 对 p 样式 进行 了 设 定 ， 设 置 段落 居 





(3) 运行 网 页 文件 。 网 页 编辑 完成 后 , 使 用 正 浏览 器 打开 , 可 以 看 到 段落 在 页 面 中 间 以 红色 字体 显示 ， 


如 图 6-6 所 示 。 








间 天 5 要- 避 事 本 一 口 x - 0O x 
文件 (月 注 加 (FE) 格式 (O) 查理 (由 。 帮助 (H) 羡 cAUsers\qiangu\Doc ”0 局 使 用 记事 本 编 续 CSS 
文件 (由 稀 纺 (EF) ”本 看 (V) ”收藏 夫 (A) 工具 (Tm) 帮助 (H) 








<head> 
ti te) 使 用 记事 本 编写 33/ti tle> 
ss > 























ee eeeolorsrodstontsiser Bop) 忽 如 一 夜 春风 来 ， 千 树 万 树 梨 花 
eo 开 。 这 人 句 使 用 CSS 进 行 了 修饰 。 
> 雹 如 一 认 守 风 来 ， 千 树 万 树 梨花 开 。 这 句 使 用 CS3 进 行 了 修饰 。《/p> 
ynhtnl> 
下 100% ~ 
6-5 添加 CSS 代码 6-6 ”字体 以 红色 显示 
2. 使 用 Dreamweaver 编写 CSS Ee | 
Dreamweaver 的 CSS 编辑 器 具有 提示 和 自动 创 |》 :2 PR 
建 CSS 功能 ， 深 受 开发 人 员 喜爱 。 So 
【 例 6-2】 使 用 Dreamweaver 创建 CSS 步骤 如 下 。 司 西 和 Ver orgs 1 
(1) 创建 HTML 文档 。 使 用 Dreamweaver 创建 |， 
HTML 文档 ， 此 处 创建 了 一 个 名 为 Chap6.2.html 的 ”上 思 
文档 ， 输 入 内 容 如 图 6-7 所 示 。 引 
(2) 添加 CSS 样式 。 在 设计 模式 中 ， 选 中 “ 春 区 
花 秋月 何 时 了 …… ”段落 后 ， 右 击 并 在 弹出 的 快捷 ”lw YRS 
菜单 中 选择 “CSS 样式 ”一 “新 建 ” 菜 单 命令 ， 弹 图 6-7 输入 内 容 





出 “新 建 CSS 规则 ”对 话 框 ， 在 “为 CSS 规则 选择 
上 下 文选 择 器 类 型 ”下 拉 列 表 中 ， 选 择 “ 标 签 〈 重 新 定义 HTML 元 素 )” 选 项 ， 如 图 6-8 所 示 。 


(3) 单 击 “ 确 定 ”按钮 ， 打开 “body 的 CSS 规则 定义 ”对 话 框 ， 在 其 中 设置 相关 的 类 型 ， 如 图 6-9 所 示 。 


5 x body 的 C55 和 多 


x 


迹 拌 刘 类 型 分 六 el 


| TIE 元 表 ) 

















三 Re 














We. 
[mR 可 | EZ [mm 1 WW 
图 6-8 “新 建 CSS 规则 ”对 话 框 图 6-9 设置 CSS 类 型 

(4) 单 击 “ 确 定 ” 按 钮 ， 即 可 完成 p 样式 的 设置 。 设 置 完成 后 ，HTML 文档 内 容 发 生变 化 。 从 代码 模 

















式 窗 口中 可 以 看 到 在 head 标记 中 ， 增 加 了 一 个 style 标记 ， 用 来 放置 CSS 样式 。 其 样式 用 来 修饰 段落 p， 


如 


和 





图 











6-10 所 示 。 





0 


(5) 运行 HIML 文档 。 在 正 浏览 器 中 预览 该 网 页 ， 其 显示 结果 如 图 6-11 所 示 ， 可 以 看 到 字体 颜色 设 
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置 为 浅 红 色 ， 大 小 为 12px， 字 体 较 粗 。 
CE] pr EL 











- OO x 

















E 居 CAUsers\qiangu\Doc 只 - 上 | 大 无 标 时 文档 

同 Sb 文人 舌 包 (EF) ”可 看 V) 收藏 夫 (A) 工具 (帮助 (H) 

加 春花 秋月 何 时 了 ， 往 事 知 多 少 ! 

局 

蕊 oy DL ER.S 所 100%6 ~ 
6-10 设置 CSS 样式 6-11 ”预览 设置 效果 


6.3 CSS 3 选择 器 的 应 用 


选择 器 (selector) 是 CSS 3 中 很 重要 的 概念 ， 所 有 HTML 语言 中 的 标记 都 是 通过 不 同 的 CSS 选择 器 进 
行 控制 的 。 用 户 只 需要 通过 选择 器 对 不 同 的 HTML 标签 进行 控制 , 并 赋予 各 种 样式 声明 , 即 可 实现 各 种 效果 。 


6.3.1 标签 选择 器 


标签 选择 器 又 称 为 标记 选择 器 ， 在 W3C 标准 中 ， 又 称 为 类 型 选择 器 (type selector)。CSS 标签 选择 器 
用 来 声明 html 标签 采用 哪 种 CSS 样式 ， 也 就 是 重新 定义 了 html 标签 。 因 此 ， 每 一 个 html 标签 的 名 称 都 可 
以 作为 相应 的 标签 选择 器 的 名 称 。 

【 例 6-3】 通 过 hl 选择 器 来 声明 页 面 中 所 有 <h1> 标 签 的 CSS 样式 风格 。 具 体 代码 如 下 : 





























<style type="text/css"> 
< 
hil{ 
color:red; 
font-size:14px; 
--> 
</style> 


以 上 CSS 代码 声明 了 html 页 面 中 所 有 <h1> 标 签 。 文 字 的 颜色 都 采用 红色 ， 大 小 都 为 14px。 

每 一 个 CSS 选择 器 都 包括 选择 器 、 属 性 和 值 ， 其 中 属性 和 值 可 以 为 一 个 ， 也 可 以 设置 多 个 ， 从 而 实现 

对 同一 个 标签 声明 多 种 样式 风格 的 目的 ， 如 图 6-12 所 示 。 

在 这 种 格式 中 ， 既 可 以 声明 一 个 属性 和 值 ， 也 可 以 声明 多 个 属性 和 值 ， 根 据 具体 情况 而 定 。 当 然 ， 还 

有 另外 一 种 常用 的 声明 格式 ， 如 图 6-13 所 示 。 
平平 el 

| mlt za red:| ffont-size: 14px hl |{ [color: red | | ; | [font-size: 14px|} 


| | | 由 论 强 。 展 性 全 展 性 
选 泽 器 ”属性 值 ”属性 


6-12 ”标签 选择 器 的 声明 格式 图 6-13 标签 选择 器 另 一 种 声明 格式 
在 这 种 格式 中 ， 每 一 个 声明 都 不 带 分 号 ， 而 是 在 两 个 声明 之 间 用 分 号 隔 开 。 同 样 ， 既 可 以 声明 一 个 属 
性 和 值 ， 也 可 以 声明 多 个 属性 和 值 。 
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注意 : CSS 对 于 所 有 的 属性 和 值 都 有 相对 严格 的 要 求 。 如 果 声 明 的 属性 和 值 不 符合 该 属性 的 要 求 ， 则 


不 能 使 该 CSS 语句 生效 。 


在 正 浏览 器 中 运行 的 结果 如 图 6-14 所 示 ， 可 以 看 到 段落 以 蓝 色 


【 例 6-4】 实例 文件 ，ch06\Chap6.4.html) 标签 选择 器 的 应 用 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<tit1le> 标 签 选择 器 </title> 
<style> 
p{color:blue;font-size:30px;} 
</style> 

</head> 

<body> 

<p> 十 年 生死 两 落 茫 , 不 思量 , 自 难 忘 .</p> 
</body> 

</html> 


相关 的 代码 实例 可 参考 Chap6.4.html 文件 , 然后 双击 该 文件 ， ox 
a | 











字体 显示 , 大 小 为 30px, 如 果 在 后 期 维护 中 , 需要 调整 段落 颜色 ， 








只 需要 修改 color 属性 值 即 可 。 十 年 生死 两 茫茫， 不 思量 ， 自 难忘 。 
6.3.2 ”类 选择 器 图 6-14 ”标签 选择 器 应 用 实例 





类 选择 器 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 。 该 选择 器 可 以 单独 使 用 ， 也 可 以 与 其 他 元 素 








结合 使 用 。 常 用 语法 格式 如 下 : 


件 ， 


段落 以 蓝 色 字体 显示 ， 大 小 为 20px， 第 二 段落 以 红色 字体 显示 ， 




















. classValue {property:value} 
classValue 是 选择 器 的 名 称 ， 具 体 名 称 由 CSS 制定 者 自己 命 
【 例 6-5】(〈 实 例文 件 ， ch06\Chap6.5.html) 类 别 选择 器 的 应 用 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 类 选择 器 </title> 
<style> 
.af 
color:blue; 
font-size:20px; 
} 
.bf 
color:red; 
font-size:22px; 
» 
</style> 
</head> 
<body> 
<h3 class=b> 清 明 </h3> 


<p class="a"> 清 明 时 节 雨 纷纷 </P> 下 二 一 二 一 
<p class="b"> 路 上 行人 欲 断 魂 </p> 上 Ee 
和 ZI) a EM tae/h) IRT wt 
</html> 清明 

相关 的 代码 实例 可 参考 Chap6.5.html 文件 ， 然 后 双击 该 文 。 清明 时 节 再 纷纷 


在 正 浏览 器 中 运行 的 结果 如 图 6-15 所 示 ， 可 以 看 到 第 一 个 路 上 行人 欲 断 现 


























大 小 为 22px， 标 题 同样 以 红色 字体 显示 ， 大 小 为 22px。 图 6-15 类 选择 器 应 用 实例 
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6.3.3 ID 选择 器 


ID 选择 器 允许 以 一 种 独立 于 文档 元 素 的 方式 来 
指定 样式 ， 在 某 些 方面 ， 它 类 似 于 类 选择 器 ， 不 过 
也 有 一 些 重要 差别 。 例 如 ，ID 选择 器 前 面 有 一 个 # 
号 ， 如 图 6-16 所 示 。 

例如 : 下 面 的 两 个 ID 选择 器 ， 第 一 个 可 以 定义 
元 素 的 颜色 为 红色 ， 第 二 个 定义 元 素 的 颜色 为 绿色 : 


#red {color:red;} 
#green {color:green;} 


在 下 面 的 HTML 代码 中 ，id 属性 为 red 的 p 元素 显示 为 红色 ， 而 id 属性 为 green 的 p 元 素 显示 为 绿色 。 
<p id="red"> 这 个 段落 是 红色 .</p> 
<p id="green"> 这 个 段落 是 绿色 .</p> 
注意 : id 属性 只 能 在 每 个 HTML 文档 中 出 现 一 次 。 
【 例 6-6】 实例 文件 ，ch06\Chap6.6.html)ID 选择 器 的 应 用 实例 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<title>ID 选择 器 </title> 
<style> 
#fontstyle{ 
color:blue; 
font-weight:bold; 






































图 6-16 ID 选择 器 结构 示意 图 























#textstyle{ 
color:red; 
font-size:22px; 

交 

</style> 

</head> 

<body> 

<h3 id=fontstyle> 咏 柳 </h3> 


<p id=textstyle> 不 知 细 叶 谁 裁 出 </p> 














<p id=textstyle> 二 月 春风 似 剪 刀 </P> TCD a 
pe Ee 
相关 的 代码 实例 可 参考 Chap6.6.html 文件 ， 然 后 双 咏 柳 
击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 6-17 所 示 , 可 不 知 细 叶 谁 裁 出 
以 看 到 标题 以 蓝 色 字体 显示 ， 大 小 为 20px， 第 一 个 段落 二 月 春风 似 剪刀 
以 红色 字体 显示 ， 大 小 为 22px， 第 二 段落 以 红色 字体 显 
示 ， 大 小 为 22px。 图 6-17 ID 选择 器 应 用 实例 
6.3.4 ”属性 选择 器 





属性 选择 器 可 以 根据 元 素 的 属性 及 属性 值 来 选择 元 素 。 如 果 希 望 选择 有 某 个 属性 的 元 素 ， 而 不 论 属性 
值 是 什么 ， 那么 可 以 使 用 简单 属性 选择 器 。 
例如 希望 把 包含 标题 (tile》 的 所 有 元 素 变 为 红色 ， 可 以 写作 : 


*#[title] {color:red;}, 
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【 例 6-7】 实例 文件 ，ch06\Chap6.7.html) 属 性 选择 器 的 应 用 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 
[title] {color:red;} 
</style> 

</head> 

<body> 

<h1> 可 以 应 用 样式 :</h1l> 


<h2 title="Hello world">Hello world</h2> 
<a title="haut" href="http://www.haut.edu.cn"> haut</a> @ 7 


<hr /> 
<h1> 无 法 应 用 样式 :</h1> 
<h2>Hello world</h2> 


<a href="http:// www.haut.edu.cn "> haut </a> 


</body> 
</html> 





@x 


加 MTom P- © BMI 
XN RE ESM Wah IRM Wm 


可 以 应 用 样式 : 
Hello world 


haus 





相关 的 代码 实例 可 参考 Chap6.7.html 文件 ， 然 后 双击 该 文 无 法 应 用 样式 : 
件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-18 所 示 。 ne eld 





6.3.5” 子 选择 器 


子 选择 器 用 来 选择 一 个 父 
意 这 个 选择 器 与 后 代 选择 器 的 
于 子 元 素 的 第 一 个 后 代 ; 而 后 
进行 选择 。 























图 6-18 属性 选择 器 应 用 实例 
元 素 直接 的 子 元 素 ， 不 包括 子 元 素 的 子 元 素 ， 它 的 符号 为 大 于 号 “>”， 请 注 
区 别 ， 子 选择 器 (child selector) 仪 是 指 它 的 直接 后 代 ， 或 者 可 以 理解 为 作用 
代 选 择 器 是 作用 于 所 有 子 后 代 元 素 。 需 要 注意 的 是 ， 后 代 选 择 器 通过 空格 来 
































【 例 6-8】〈 实 例文 件 ，ch06\Chap6.8.html) 子 选 择 器 的 应 用 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 


<title>CSS 的 子 选 择 器 </title> 


<style type="text/css"> 
ul.myList > li > af 


text-decoration:none; 
color:#336600; 

} 

</style> 

</head> 

<body> 

<ul class="myList"> 
<1i> 


/* 子 选 择 器 */ 
/* 没有 下 画 线 */ 


<a href="http://www.beijingdaxue.edu.cn/"> 北 京 大 学 </a> 


<ul> 
<1i><a href=" 
<li><a href=" 
<liS<a href=" 
</ul> 
</1i> 
</ul> 
</body> 
</html> 


#">CSS1</a></1i> = 
#">CSS2</a></1i> @ vm -ocemrann 
#">CSS3</a></1i> 文 作 | 站” 编 三 (日 。 查 看 (V)。 收藏 大 (A。 工具 (帮助 (H) 
"北京 大 学 
* CSS1 
* CSS2 
* C553 





相关 的 代码 实例 可 参考 Chap6.8.html 文件 ， 然 后 双击 该 文 
件 , 在 正 浏 览 器 中 运行 的 结果 如 图 6-19 所 示 。 6-19 子 选择 器 应 用 实例 
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6.4 调用 CSS 3 的 方式 


CSS 样式 表 能 很 好 地 控制 页 面 显示 ， 以 达到 分 离 网 页 内 容 和 样式 代码 的 目的 。CSS 样式 表 控 制 HTML 
页 面 达到 好 的 样式 效果 ， 其 方式 通常 包括 行内 样式 、 内 谋 样 式 、 链 接 样 式 和 导入 样式 。 


6.4.1 行内 样式 


行内 样式 是 最 为 简单 的 CSS 设置 方式 , 需要 给 每 一 个 标签 都 设置 style 属性 。 顾名思义 ， 它 和 样式 所 定 
义 的 内 容 在 同一 代码 行内 ， 其 代码 如 下 : 

<p style="color:red"> 段 落 样 式 </p> 

【 例 6-9】 实例 文件 ，ch06\Chap6.9.html) 行内 样式 的 应 用 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<head> 

<title>CSS 行内 样式 </title> 

</head> 

<body> 

<p style="font:' 幼 贺 '，' 仿 宋 '，' 黑 体 ';font-size:30px;color:#0000FF;">CSS 行内 样式 01</p> 
<p style="font-family:Arial, Helvetica, sans-serif;color:#FF0000;">CSS 行内 样式 02</p> 
<p>CSS 行内 样式 03</p> 

















<p>&nbsp;</p> 
</body> 和 
用 | 本 MI D- 0 | cs 


ED 


相关 的 代码 实例 可 参考 Chap6.9.html 文件 ， 然 后 双击 该 文 








件 , 在 正 浏览 器 中 运行 的 结果 如 图 6-20 所 示 , 可 以 看 出 各 段 的 CSS 行 内 样式 01 
文字 以 不 同 的 效果 显示 。 css 行内 样式 02 
行内 样式 是 最 为 简单 的 CSS 使 用 方法 ， 但 由 于 需要 为 每 一 Cs 和 内 样式 03 
个 标记 设置 style 属性 ， 后 期 维护 成 本 依然 很 高 ， 而 且 网 页 文件 | 
容易 过 大 ， 因 此 不 推荐 使 用 。 6-20 ”行内 样式 的 应 用 








6.4.2 ”内 谤 样式 


在 HTML 页 面 内 部 定义 的 CSS 样式 表 叫 作 柑 入 式 CSS 样式 表 , 也 就 是 在 HTML 文档 的 head 部 分 使 用 
style 标签 ， 并 在 该 标签 中 定义 一 系列 CSS 规则 。 其 代码 格式 如 下 : 
<head> 


<style type="text/css"> 
es 





= 
</style> 
</head> 


【 例 6-10】 实例 文件 ，ch06\Chap6.10.html) 岩 入 样式 的 应 用 实例 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<title> 嵌 入 样式 的 应 用 </title> 
<style type="text/css" media="screen"> 
= 
hl 
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NE 


font-size:30px; 
color:red; 
background-color:yellow; 
text-align:left; 
text-decoration:underline 
} 
img 
{ 
width:3007 
height:300; 
} 
body 
{ 


background-color:green; 


Ee @ 囊 MATYeo7ioyeve 万 ~ 6| 说 各 和 的 南 用 

</style> 立夫 (F 委 岛 (Fj 去 豆 (V) 帮 光 (A) 工 县 MT 才 印 (H) 

</head> 

<body> 

<h1> 嵌 入 样式 的 应 用 </h1> 
<img src="02.jpg"> 
</body> 

</html> 


相关 的 代码 实例 可 参考 Chap6.10.html 文件 ， 然 后 双击 
该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 6-21 所 示 ， 可 以 看 
到 网 页 背景 以 绿色 显示 ， 图 片 以 300pxX 300px 大 小 显示 。 




















6.4.3 ”链接 样式 图 6-21 内 幅 样 式 的 应 用 


链接 式 CSS 样式 表 是 使 用 频率 最 高 ， 也 是 最 为 实用 的 CSS 样式 。 它 将 HTML 页 面 本 身 与 CSS 样式 风 
格 分 离 为 两 个 或 者 多 个 文件 , 实现 了 页 面 框架 HTML 代码 与 美工 CSS 代码 的 完全 分 离 , 使 得 前 期 制作 和 后 
期 维护 都 十 分 方便 。 

链接 样式 是 指 在 外 部 定义 CSS 样式 表 并 形成 以 .css 为 扩展 名 的 文件 , 然后 在 页 面 中 通过 <link> 链 接 标记 
链接 到 页 面 中 ， 而 且 该 链接 语句 必须 放 在 页 面 的 <head> 标 记 区 ， 代 码 如 下 : 

<link rel="stylesheet"”tyYype="text/css”href="1.css” /> 

(1) rel 指定 链接 到 样式 表 ， 其 值 为 stylesheet。 

(2) type 表示 样式 表 类 型 为 CSS 样式 。 

(3) href 指定 了 CSS 样式 表 所 在 位 置 ， 此 处 表示 当前 路 径 下 名 称 为 1.css 文件 。 

【 例 6-11-1】〔 实 例文 件 ，ch06\Chap6.11.html》 链 接 样 式 的 使 用 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<title> 页 面 标题 </title> 

<link href="Chap6.1]1.css" type="text/css" rel="stylesheet"> 

</head> 

<body> 

<h2> 咏 柳 </h2> 

<p> 恬 玉 妆 成 一 树 高 , 万 条 垂下 绿 丝 缘 .</P> 

<h2> 清明 </h2> 

<p> 清 明 时 节 雨 纷纷 ,路 上 行人 窝 断 魂 .</p> 


</body> 
</html> 


【 例 6-11-2】 实例 文件 ，ch06\Chap6.11.css) 链接 文 件 。 代 码 如 下 : 
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h2{ 
color:#00FFFF; pp 
| 同 wumeo7niovas 记 - 0| 三 
color:#FFOOFF; 文件 (月 篇 声 (E] 。 坦 看 (V) 收 训 去 (A) ”工具 (T) 考 助 (H) 
text-decoration:underline; 号 柳 
font-weight:bold; 
每 -Size:24px; 
a 舌 玉 妆 成 一 树 商 ， 万 条 萨 下 绿 丝 缘 。 
相关 的 代码 实例 可 参考 Chap6.11.html 文件 ， 然 后 | 清明 

双击 该 文件 ,在 正 浏览 器 中 运行 的 结果 如 图 6-22 所 示 ， 清明 时 首 雨 纷纷 ， 路 上 行人 欲 断 魂 。 


可 以 看 到 标题 和 段落 以 不 同样 式 显 示 。 


6.4.4 导入 样式 


导入 样式 和 链接 样式 基本 相同 ， 都 是 创建 一 个 单独 CSS 3 文件 ， 然 后 再 引入 到 HTML 文件 中 ， 只 不 过 
语法 和 运作 方式 有 差别 。 采 用 导入 样式 的 样式 表 ， 在 HTML 文件 初始 化 时 , 会 被 导入 到 HTML 文件 内 ， 作 
为 文件 的 一 部 分 ， 类 似 于 内 嵌 效 果 。 而 链接 样式 是 在 HIML 标记 需要 样式 风格 时 才 以 链接 方式 引入 。 

导入 外 部 样式 表 是 指 在 内 部 样式 表 的 <style> 标 记 中 ， 使 用 @import 导入 一 个 外 部 样式 表 ， 代 码 如 下 : 


<head> 
<style type="text/css" > 
i 
@import "1.css" 
==> </style> 
</head> 


导入 外 部 样式 表 相 当 于 将 样式 表 导入 到 内 部 样式 表 中 ， 其 方式 更 有 优势 。 导 入 外 部 样式 表 必须 在 样式 
表 的 开始 部 分 ， 其 他 内 部 样式 表 上 面 。 
【 例 6-12-1】 “实例 文件 ，ch06\Chap6.12.html》 导 入 样式 的 应 用 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<title> 导 入 样式 </title> 
<style> 

@import " Chap6.12.css" 
</style> 

</head> 

<body> 

<h1> 江 雪 </h1l> 

<p> 千 山 鸟 飞 绝 , 万 径 人 踪 灭 . 孤 舟 闵 笠 盆 , 独 钓 寒 江 雪 .</P> 
</body> 

</html> 


【 例 6-12-2】 案例 文件 ，ch06\Chap6.12.css 链接 文件 。 代 码 如 下 : 


hl{text-align:center;color:#0000ff} 
p{font-weight:bolder;text-decoration:underline;f 
ont-size:20px;} 


相关 的 代码 实例 可 参考 Chap6.12.html 文件 , 然后 双击 
该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-23 所 示 ， 可 以 江 雪 
看 到 标题 和 段落 以 不 同样 式 显示 ， 标 题 居 中 显示 颜色 为 蓝 。 王 山 鸟 飞 绝 ， 万 径 人 踪 灭 。 孤 舟 鞭 签 侈 ， 独 的 寒 江 雪 。 
色 ， 段 落 以 大 小 20px 并 加 粗 显示 。 

导入 样式 与 链接 样式 相 比 ， 最 大 的 优点 就 是 可 以 一 次 
导入 多 个 CSS 3 文件 ， 其 格式 如 下 : 图 6-23 导入 样式 的 应 用 





图 6-22 链接 样式 的 应 用 























司 MAIf20inovavs D0 | 臣 St 
文件 由 壬 镶 (E) 但 看 (V】 收藏 夫 (A) 工具 (T) 帮助 (H) 

















和 
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NE 


<style> 

@import "1.6.css" 
@import "test.css" 
</style> 





6.5 ”典型 案例 一 一 制作 移动 网 页 导航 菜单 


导航 菜单 作为 网 站 必 不 可 少 的 组 成 部 分 ， 关 系 着 网 站 的 可 用 性 和 用 户 体验 。 下 面 就 利用 CSS 来 制作 
个 移动 页 面 导航 菜单 。 具 体 步 骤 如 下 : 
(1) 构建 HTML 页 面 。 创 建 HTML 页 面 ， 完 成 基本 框架 的 创建 ， 其 代码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<title> 网 页 导航 莱 单 </title> 
</head> 
<body> 
<div id="navigation"> 
<ul> 

<1i><a href="#"> 推 荐 网 站 </a></1i> 

<1i><a href="#"> 新 闻 头 条 </a></1i> 

<1i><a href="#"> 最 新 电影 </a></1i> 

<1i><a href="#"> 网 上 购物 </a></1i> 

<1i><a href="#"> 娱 乐 八卦 </a></1i> 

</ul> 

</div> 
</body> 
</html> 


在 正 浏 览 器 中 浏览 效果 如 图 6-24 所 示 ， 此 时 可 以 看 到 创建 的 移动 页 面 的 基础 框架 。 
(2) 使 用 内 嵌 样 式 。 如 果 要 对 网 页 背景 进行 修饰 ， 需 要 添加 CSS， 此 处 使 用 内 嵌 样 式 ， 在 <head> 标 记 
中 添加 CSS， 其 代码 如 下 : 


<style> 
bodyt{ 
background-color:#ffdee0; 

































































} 
</style> 


在 正 浏览 器 中 浏览 效果 如 图 6-25 所 示 ， 此 时 可 以 看 到 背景 颜色 发 生 了 变化 。 





























= 二 全 
司 MAIfE201710Vava -0 || 感 几 RS 抱 芝 单 x | 全 MAIfR201710Vava 了 - 0 | 居间 
文件 (| 妨 恰 (下 二 看 NV) 收藏 夫 (A) 工具 (T 孝 印 ( 文件 (有 舌 震 (E) 下 看 V) 庚 营 夫 (A) 工具 (] 帮助 (H 
， 推 荐 网 站 。 推荐 网 站 
， 新 闻 头 条 * 新 闻 头 条 
: 妓 过 . 蝇 系 人 寺 
图 6-24 ”创建 移动 页 面 基础 框架 6-25 ”添加 移动 页 面 背景 颜色 


(3) 改变 文字 样式 。 添 加 CSS 代码， 改变 导航 文字 的 字体 样式 ， 其 代码 如 下 : 
#navigation { 

width:200px; 

font-family:Arial; 
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} 
在 正 浏览 器 中 浏览 效果 如 图 6-26 所 示 ， 可 以 看 到 字体 样式 为 Arial。 
(4) 去 除 项 目 符号 。 去 除 标 签 UL 前 面 的 项 目 符号 ， 其 代码 如 下 : 


#navigation ul { 





























list-style-type:none; /* 不 显示 项 目 符号 */ 
margin:0px; 
padding:0px; 
在 下 浏览 器 中 浏览 效果 如 图 6-27 所 示 ， 可 以 看 到 文字 前 面 的 项 目 符号 被 取消 了 。 
一 D x - oO x 
闻 MAII201710Vew 户 -| 大 由 RSM x | 司 MAIfR201710Vave 了 - C| 大 网 Sm 第 
文件 站” 编 澡 (E) 过 看 V) 收藏 夫 (A) 工具 (D 。 帮助 (H) 文件 (。 编 志 (E) 。 坦 看 (V) 。 收 芒 夫 (A) 工具 MT 帮助 (H) 
Sie 加 EFM 物 
.可乐 作 卦 娱乐 八卦 
6-26 设置 移动 页 面 字体 样式 6-27 ”取消 文字 前 的 项 目 符号 


(5) 添加 下 画 线 。 使 用 CSS 样式 为 导航 文字 添加 下 画 线 ， 其 代码 如 下 : 
#navigation li { 

border-bottom:1px solid #ED9F9F; /* 添加 下 画 线 */ 
} 
在 正 浏 览 器 中 浏览 效果 如 图 6-28 所 示 ， 可 以 看 到 每 个 文字 下 方 都 添加 了 一 条 下 画 线 。 
(6) 修饰 导航 文字 。 使 用 CSS 3 可 以 为 导航 菜单 添加 边框 、 区 块 等 元 素 。 其 代码 如 下 : 
#navigation li af 

display:block; /* 区 块 显示 */ 

padding:5px 5px 5px 0.5em; 

text-decoration:none; 

border-left:12px solid #711515; /* 左边 的 粗 红 边 */ 

border-right:lpx solid #711515; /* 右 侧 阴 影 */ 











} 
在 正 浏览 器 中 浏览 效果 如 图 6-29 所 示 ， 可 以 看 到 导航 菜单 文字 添加 了 边框 、 区 块 等 元 素 。 











一 年 ”2 —- 0 x 
和 MAIfE\201710Vava D ~ © | ES x 人 司 MAIfg2o171ovava D - C | 局 网 Sms 单 
文件 (F) ” 妨 鲁 E) ”查看 (V) 收藏 夫 [A) 工具 (T) 。 帮 动 (Hl 文件 仆 。 连同 [E) ”查看 (V) 收藏 失 [A) 工具 (T) 帮助 (H) 














图 6-28 ”添加 文字 下 方 的 下 画 线 图 6-29 为 导航 文字 添加 边框 、 区 块 等 元 素 
(7) 添加 背景 颜色 。 在 CSS 样式 中 ， 为 每 个 导航 菜单 添加 背景 颜色 ， 其 代码 如 下 : 


#navigation li a:link, #navigation li a:visited{ 
background-color:#c11136; 
Color:#FFFFFF; 
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在 下 浏览 器 中 浏览 效果 如 图 6-30 所 示 ， 可 以 看 到 每 个 导航 菜单 都 显示 了 背景 颜色 。 
(8) 添加 鼠标 或 手指 经 过 效果 。 使 用 CSS 为 导航 添加 鼠标 或 手指 经 过 效果 ， 其 代码 如 下 : 








#navigation 1i a:hoverf /* 鼠标 经 过 时 #/ 
background-color:#990020; /* 改变 背景 色 */ 
color:#ffff007 /<* 改变 文字 颜色 */ 


} 
在 正 浏览 器 中 浏览 效果 如 图 6-31 所 示 ， 当 鼠标 或 手指 指向 某 个 导航 菜单 时 ， 背 景 颜色 发 生 了 改变 。 









































- 0O x —- OO x 

| | 全 MAIfR201710Vava | 大 巾 mamim 单 x 上 国 MAIfF201710yava DC | 夺 网 页 导 舟 荣 单 
| 文件 月。 篇 误 (昌吉 在。 履 奈 二 (A。 工具 (帮助 (H) 文件 朋 ”各 注目 本 看 V)】 收 若 夫 内 工具 (T) 帮 动 (H) 

推荐 网 站 

新 闻 头条 

最 新 电影 

网 上 购物 

娱乐 八卦 

图 6-30 为 导航 菜单 添加 背景 颜色 图 6-31 添加 鼠标 或 手指 经 过 效果 


6.6 ”就 业 面试 技巧 与 解析 


6.6.1 面试 技巧 与 解析 (一) 


面试 官 : 选择 器 用 得 好 坏 ， 决 定 了 对 页 面 控制 得 好 坏 ， 请 问 CSS 中 有 哪些 选择 器 ? 

应 聘 者 : CSS 选择 器 有 以 下 几 种 。 

(1) 标签 选择 器 ; 又 称 为 标记 选择 器 ， 在 W3C 标准 中 ， 又 称 为 类 型 选择 器 (type selector)。 

(2) 类 选择 器 ， 人 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 。 可 以 单独 使 用 ， 也 可 以 与 其 他 元 素 结 
合 使 用 。 
(3) ID 选择 器 : 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 ， 在 某 些 方面 ，ID 选择 器 类 似 于 类 选择 
器 ， 不 过 也 有 一 些 重要 差别 。 

(4) 属性 选择 器 : 可 以 根据 元 素 的 属性 及 属性 值 来 选择 元 素 。 


6.6.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : 请 谈 谈 你 对 盒 模型 的 理解 。 

应 聘 者 : 盒 模型 有 两 种 ， 分 别 是 正 盒 模型 和 W3C 盒 模型 。W3C 盒 模型 被 大 家 称 为 标准 盒 模型 ， 它 E 
内 容 (content)、 填 充 (padding)、 边 框 (border) 和 边界 (margin) 4 个 部 分 组 成 。 两 者 的 区 别 是 ， 正 盒 模 
型 的 内 容 部 分 把 填充 和 边框 计算 进去 了， 而 W3C 盒 模型 没有 。 
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第 7 章 
使 用 CSS 3 设计 移动 页 面 样式 


二 > 学 习 指引 


在 Web 世界 里 ，CSS 就 像 一 个 绘画 大 师 ， 描 绘 出 一 个 又 一 个 五 彩 缤纷 的 页 面 。 本 章 主 要 介绍 使 用 CSS 3 
设计 移动 页 面 样式 ， 内 容 包 括 和 图 片 说 再 见 、CSS 3 布局 之 道 、 弹 性 盒 布 局 、 让 页 面 动 起 来 、 响 应 式 页 面 
设计 界面 等 。 


”重点 导读 


。 掌 握 CSS 3 的 布局 。 

。 掌 握 弹 性 盒子 布局 。 

。 熟 悉 CSS 3 变形 、 过 渡 、 动 画 。 
。 掌握 响应 式 页 面 设计 。 


7.1 ”和 图 片 说 再 见 


运用 CSS 3 处 理 各 种 特效 更 加 简单 ， 这 也 是 CSS 3 备 受 前 端 设计 师 热 爱 的 原因 。 

以 前 ,使 用 图 片 进行 UI 设计 很 常见 ， 因 为 设计 简单 ， 且 用 户 的 需求 也 简单 。 现 在 ， 用 户 对 网 站 速度 要 
求 越 来 越 高 ， 由 于 图 片 消耗 了 大 量 的 网 络 资源 ， 严 重 影响 加 载 速 度 。 因 此 ， 解 决 这 一 问题 ， 就 成 了 很 多 
户 的 迫切 需求 。 而 CSS 3 中 出 现 的 很 多 新 属性 ， 可 以 大 大 降低 图 片 使 用 率 ， 控 件 、 图 标 和 背景 都 可 以 使 用 非 
技术 来 完成 ， 并 能 更 好 地 提高 网 站 性 能 。 可 以 说 ， 有 了 CSS 3， 设 计 师 可 以 和 图 片 说 再 见 了 。 


7.1.1 背景 和 边框 


在 网 页 设计 中 ， 每 一 个 盒子 都 可 以 拥有 一 个 背景 和 边框 ， 可 以 为 网 页 增添 色彩 。 
边框 (border) 属性 包括 边框 宽度 、 样 式 、 颜 色 以 及 圆 角 等 ， 其 中 圆 角 属性 是 CSS 3 新 增 的 功能 。 之 前 ， 
圆 角 按钮 设计 层出不穷 ， 通 常 是 使 用 多 张 图 片 作为 背景 图 案 ， 操 作 起 来 相当 麻烦 。 现 在 ， 还 好 CSS 3 提供 
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了 border-radius 这 个 强大 的 


属性 ， 让 圆 角 变 得 非常 简单 。 


【 例 7-1】 实例 文件 ，ch07\Chap7.1.html) 设置 贺 角 。 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title></title> 

<style> 

divt{ 

border:1lpx solid #000000; 
border-radius:15px; /* 指 定 圆 角 的 半径 为 15px*/ 
width:100px; 
height:100px;} 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


这 样 就 给 宽 和 高 为 100px 的 矩形 添加 了 15px 的 圆 角 ,相关 的 代码 实例 可 参考 Chap7.1.html 文件 , 在 正 


浏览 器 中 运行 的 结果 如 图 7-1 所 示 。 


提示 : 设置 圆 角 ， 所 有 合法 的 CSS 度量 值 都 可 以 使 用 em、pt、px、% 等 。 


可 以 看 到 ，border-radius 用 法 非常 简单 。 与 padding 等 属性 类 似 ，border-radius 也 可 以 指 
右上 、 右 下 和 左下 的 圆 角 半径 进行 设置 。 代 码 如 下 : 


别 对 和 矩 形 左上 、 
border-top-left-radius:2em; 
border-top-right-radius:20px; 
border-bottom-right-radius:20pt; 
border-bottom-left-radius:20%; 


与 padding、margin 一 样 ， 可 以 简写 为 : 
border-radius:2em 20px 20pt 20%; 


相关 的 代码 实例 可 参考 Chap7.1.html 文件 ， 在 
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7-1 设置 圆 角 1 


说 明 : border-radius 可 以 同时 设置 1 到 4 个 值 。 
置 两 个 值 ， 表 示 左 上 角 和 右 下 角 用 第 一 个 值 ， 右 上 
用 第 一 个 值 ， 右 上 角 和 左下 角 用 第 二 个 值 ， 右 下 角 
上 角 、 右 下 角 、 左 下 角 ( 顺 时 针 顺序 ) 。 

更 有 趣 的 是 ，border-radius 不 仅 可 以 指定 圆 角 过 


定 多 个 值 以 分 


正 浏览 器 中 运行 的 结果 如 图 7-2 所 示 。 


= 种 关 


是 hmpi//localhost6334 中 - 必 ]| 雪 local 
文件 月 如 名 (二 看 V) 收藏 (A) 工具 (帮助 (H) 


J 


7-2 设置 圆 角 2 


如 果 设 置 1 个 值 ， 表 示 4 个 圆 角 都 使 用 这 个 值 。 如 果 设 
角 和 左下 角 用 第 二 个 值 。 如 果 设置 3 个 值 ， 表 示 左 上 角 
用 第 三 个 值 。 如 果 设 置 4 个 值 ， 则 依次 对 应 左上 角 、 右 


hoc 








下 100%6 ~ 








径 ， 还 可 以 在 前 面值 的 基础 上 ， 以 斜 线 分 隔 指定 第 二 组 





值 (也 由 1 一 4 个 值 构成 )， 这 时 ， 第 一 组 值 指定 水 


代码 如 下 : 





平方 向 上 的 半径 ， 第 二 组 值 指定 垂直 方向 上 的 半径 。 其 


人。 








border-radius:10px 20px 30px 40px / 50px 40px 30px 20px; 


相关 的 代码 实例 可 参考 Chap7.1.html 文件 ， 在 
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中 运行 的 结果 如 图 7-3 所 示 。 





正 浏览 器 
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熟练 掌握 以 上 圆 角 知识 ， 可 以 拱 配 出 各 种 类 型 的 边框 效果 。 

















在 背景 (background) 方面 ，CSS 3 也 增加 了 许多 功能 ， 其 是 网 页 i 
设计 中 很 重要 的 技术 ,可 以 控制 背景 色 、 背 景 图 片 等 属性 。 总 的 来 区 于 
说 , Background 可 以 设置 多 达 8 个 种 类 的 属性 , 具体 如 表 7-1 所 示 。 3 





图 7-3 设置 圆 角 水 平 、 垂 直 标注 


表 7-1 background 可 设置 的 8 个 种 类 的 属性 





是 否 至 CSS 3 新 增 的 属性 





属 性 


















































background-color 用 于 设置 背景 颜色 否 
background-image 用 于 设置 背景 图 片 否 
background-position 用 于 设置 对 象 的 位 置 背景 图 片 理 
background- repeat 用 于 设置 对 象 背景 图 片 是 否 平 铺 否 
和 人 定 或 随 着 页 面 的 其 余部 分 否 
background- size 于 设置 背景 图 片 的 大 小 是 
background-clip 用 于 设置 背景 覆盖 的 范围 是 
background-origin 于 设置 背景 覆盖 的 起 点 是 


CSS 2 中 定义 的 属性 ， 我 们 应 该 很 熟悉 了， 现在 我 们 主要 讲 一 下 CSS 3 新 增 的 几 个 属性 。 

background-size 属性 规定 背景 图 片 的 尺寸 。 在 CSS 3 之 前 ， 背 景 图 片 的 尺寸 是 由 图 片 的 实际 尺寸 决定 
的 。 在 CSS 3 中 ， 能 够 以 像素 或 百分比 规定 背景 图 片 的 尺寸 。 如 果 以 百分比 规定 尺寸 ， 那 么 尺寸 相对 于 父 
元 素 的 宽度 和 高 度 。 

【 例 7-2】 (实例 文件 ，ch07\Chap7.2.html) 设置 背景 图 片 尺寸 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 

.divlif 

width:240px;height:200px; float:left; 
background:url ("time.jpg"); 
background-repeat:no-repeat; 

-div2 { 
background:url ("time.jpg"); 
background-size:170px 170px; /*# 固 定 背景 图 片 大 小 设置 */ 
background-repeat :no-repeat7 
width:200px;height:200px;float:left; 

} 

.div3{ 
background:url ("time.jpg"); 
background-size:70% 70 名 ; /* 百 分 比 图 片 大 小 设置 */ 
background-repeat :no-repeat;width:200px;height:200px;float:]left; 
3 
</style> 
</head> 
<body> 
<div class="div1"> 我 是 原始 图 片 大 小 </div> 


<div class="div2"> 我 是 固定 图 片 大 小 </div> 
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<div class="div3"> 我 是 百分比 图 片 大 小 </div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap7.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-4 所 示 。 

background-size 属性 还 有 两 个 非常 有 用 的 关键 字 预 设 值 : cover 和 contain。cover 是 将 图 片 放大 ， 以 适 
合 铺 满 整个 盒子 ， 主 要 运用 在 图 片 小 于 盒子 ， 又 无 法 使 用 background-repeat 来 实现 时 ， 就 可 以 采用 cover; 
将 背景 图 片 放大 到 适合 盒子 的 大 小 ， 但 这 种 方法 会 让 背景 图 片 失真 。contain 值 刚 好 与 cover 相反 ， 其 主要 
是 将 背景 图 片 缩小 ， 以 适合 铺 满 整 个 盒子 ， 主 要 运用 在 背景 图 片 大 于 元 素 盒 子 ， 而 又 需要 将 背景 图 片 全 部 
显示 出 来 ， 此 时 就 可 以 使 用 contain 将 图 片 缩小 到 适合 盒子 大 小 为 止 ， 这 种 方法 同样 会 让 图 片 失真 。 

例如 我 们 把 “ 例 7-2” 中 .div2 和 .div3 样式 分 别 蔡 换 成 如 下 代码 : 

.div2{background:url("time.jpg") ;background-repeat:no-repeat;width:300px;height:300px;float:left; 

border:1lpx solid #000000;} 

.div3{background:url ("time.jpg") ;background-repeat :no-repeat;width:150px;height:150px;float:left; 

border:lpx solid #000000;} 


相关 的 代码 实例 可 参考 Chap7.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-5 所 示 。 
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图 7-4 设置 背景 图 片 大 小 图 7-5 “在 不 同 大 小 盒子 里 背景 图 片 显示 的 效果 


可 以 看 大 盒子 “ 装 不 满 ” 小 盒子 只 显示 一 部 分 ， 这 时 就 可 以 使 用 cover 和 contain 。 
【 例 7-3】 “实例 文件 ,ch07\Chap7.3.html) 使 用 cover 和 contain 设置 效果 。 代 码 如 下 : 


<!DOCTYPE html> 

<html] lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title></title> 

<style> 

divi{ 
width:200px;height:200px;float:left; 
background:url ("time.jpg"); 
background-repeat :no-repeat; 
border:lpx solid #000000; 





} 

-div2{ 
width:300px;height:300px;float:left; 
border:1px solid #000000; 
background:url ("time.jpg"); 
background-size:cover; /* 设 置 cover 属性 #/ 
background-repeat :no-repeat; 

-div3{ 
width:150px;height:150px;float:left; 
border:1lpx solid#000000; 

background:url ("time.jpg"); 
background-size:contain; /* 设 置 contain 属性 #/ 
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background-repeat :no-repeat; 
} 

</style> 

</head> 

<body> 

<div class="div1"> 正 适应 盒子 </div> 

xdiv class="div2"> 大 盒子 设置 cover</div> 
<div class="div3"> 小 盒子 设置 contain</div> 
</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.3.html 文件 , 在 正 
浏览 器 中 运行 的 结果 如 图 7-6 所 示 。 

CSS 3 中 新 引入 的 background-clip 和 background- 
origin 两 个 与 元 素 背 景 相关 的 属性 ， 它 们 有 相同 的 可 
选 值 ， 即 border-box、padding-box、content-box 3 种 。 

background-clip 属性 规定 背景 的 绘制 区 域 ， 指 定 
背景 在 哪些 区 域 可 以 显示 , 但 与 背景 开始 绘制 的 位 置 
无 关 ， 背 景 绘制 的 位 置 可 以 出 现在 不 显示 背景 的 区 
域 ， 这 就 相当 于 把 在 背景 显示 区 域 以 外 的 部 分 裁剪 
了 。background-clip 可 选 值 的 属性 如 表 7-2 所 示 。 
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om 








7-6 使 用 cover 和 contain 设置 效果 


表 7-2 background-clip 属性 的 3 个 可 选 值 





属 性 
border-box 
padding-box 


content-box 





功 能 
只 显示 边框 内 的 背景 
只 显示 内 边框 内 的 背景 
只 显示 内 容 框 内 的 背景 


【 例 7-4】 “实例 文件 ， ch07\Chap7.4.html) 使 用 background-clip 属性 中 的 3 个 可 选 值 设置 效果 。 代 码 


如 下 : 
<!DOCTYPE html> 
<html] lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
divt{ 
margin-left:10px;padding:20px; 
width:100px;height:100px; 
float:left;font-size:20px;color:white; 
border:20px dashed red; 
background-image:url ('time.jpg'); 
background-repeat :no-repeat; 
background-position:left; 
上 
.divl{ background-clip:border-box; } 
-div2{ background-clip:padding-box; } 
.div3{ background-clip:content-box; } 
</style> 
</head> 
<body> 
<div class="divl">border-box</div> 
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<div class="div2">padding-box</div> 
<div class="div3">content-box</div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap7.4.html 文件 ， 在 正 浏 


览 器 中 运行 的 结果 如 图 7-7 所 示 。 


background-origin 属性 规定 background-position 属性 相对 于 什么 位 置 来 定位 , 指定 背景 从 哪个 区 域 开始 


绘制 。background-origin 可 选 值 的 属性 如 表 7-3 所 示 。 








表 7-3 background-origin 属性 3 个 可 选 值 




















属 性 功 能 

border-box 从 边框 开始 绘制 背景 起 始 位 置 

padding-box 从 内 边 距 框 开始 绘制 背景 起 始 位 置 

content-box 从 内 容 框 开始 绘制 背景 起 始 位 置 
background-origin 属性 3 个 可 选 值 设置 效果 ， 可 参考 【 例 7-4】 代 码 ， 只 需要 把 .div1、.div2 和 .div3 中 





的 background-clip 换 成 background-origin 即 可 。 
相关 的 代码 实例 可 参考 Chap7.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-8 所 示 。 
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7-7 使 用 background-clip 属性 中 3 不 可 沈 什 没 置 效果 图 7-8 使 用 background-origin 属性 中 3 个 可 选 什 设置 效果 


7.1.2 ”渐变 和 阴影 

渐变 和 阴影 终于 被 落实 在 了 CSS 3 标准 文档 里 ， 

1. 渐变 

CSS 3 可 以 让 背景 
gradient ) 。 

线性 渐变 语法 如 下 : 

linear-gradient (方向 ,颜色 1, 位 置 1, 颜色 2, 位 置 2…… ) 

关于 渐变 ,虽然 浏览 器 已 经 支持 ， 但 webkit 内 核 的 浏览 器 还 没有 去 掉 前 缀 -webkit-, 语法 和 新 标准 也 不 
太一 样 ， 要 在 Chrome、Safari、Firefox 中 实现 渐变 效果 ， 需 要 加 上 前 缀 -webkit-。IE 9+ 需 要 加 前 级 -ms-。 

对 于 线性 渐变 的 方向 ， 只 要 设置 起 始 位 置 ， 例 如 top 表示 由 上 至 下 ，right 表示 由 右 到 左 ，bottom 表示 
由 下 到 上 ，left 表示 由 左 到 右 ，top right 表示 由 右上 到 左下 ， 也 可 以 用 角度 表示 30” ， 表 示 由 左下 到 右上 ， 
-30” 表示 由 左上 到 右 下 。 

【 例 7-5】“〈 实 例文 件 ， ch07\Chap7.5.html) 设置 渐变 效果 。 代 码 如 下 : 

<!DOCTYPE html> 


<html lang="en"> 
<head> 
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大 部 分 浏览 器 也 都 支持 它们 。 


产生 渐变 效果 ， 渐 变 属性 有 两 种 ， 即 线性 渐变 (linear-gradient) 和 径 向 渐变 〈radial- 
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<meta charset="UTF-8"> 

<title></title> 

<style> 

div{ width:200px;height:200px;float:left; margin-left:15px;text-align:center;} 
.divl{background: -webkit-linear-gradient (left, black, white)} 
.div2{background:-webkit-linear-gradient (left top, black, white)} 
.div3{background: -webkit-linear-gradient (45deg, black, white)} 
</style> 

</head> 

<body> 

<div class="div1"> 由 左 至 右 </div> 

<div class="div2"> 由 左上 至 右 下 </div> 

<div class="div3">45deg 方向 </div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.5.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-9 所 示 。 


目 baoxsstzmirric x 国 


D localhost 








图 7-9 渐变 效果 
如 果 第 一 个 参数 省 略 不 写 ,默认 从 上 往 下 泻 染 。 渐 变 颜色 也 可 以 指定 两 种 以 上 的 颜色 ,例如 下 面 代码 : 














css 代码: 


.div4{background: -webkit-linear-gradient (gold yellow,red)} 
div5{background: -webkit-linear-gradient (left, gold, yellow, red)} 


html 代码 : 

<div class="div4"> 二 种 以 上 颜色 </div> 

<div class="div5"> 二 种 以 上 颜色 </div> 

相关 的 代码 实例 可 参考 Chap7.5.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-10 所 示 。 
每 一 个 颜色 后 面 都 可 以 紧 跟 一 个 百分比 终止 值 ， 使 颜色 不 均匀 分 布 。 

css 代码 : 

.div6{fbackground:-ms-linear-gradient (gold 20%,yellow 30%,red 50%)} 

html 代码 : 


<div class="div6"> 百 分 比值 </div> 
相关 的 代码 实例 可 参考 Chap7.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-11 所 示 。 
































加 Iocalhost63342/anii7hw X 四 一 [= 
CQ © localhost5334 文科 月。 奖 大 IE] 三才 VJ i 
二 种 以 上 颜色 二 种 以 百分比 入 
图 7-10 多 颜色 渐变 图 7-11 百分比 值 渐变 


127 


/天 
HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 
N34 











CSS 3 另 一 种 渐变 是 径 向 渐变 ， 其 是 圆 形 或 顶 圆 形 渐变 ， 颜 色 不 再 沿 着 一 条 直线 渐变 ， 而 是 从 一 个 起 





点 向 所 有 方向 渐变 ， 是 一 种 从 起 点 到 终点 、 颜 色 由 内 到 外 进行 的 圆 形 渐变 。 





语法 如 下 : 
background: radial-gradient (center,shape,size,start-color,stop-color) 
说 明 如 下 : 
center: 渐变 的 中 心 点 位 置 . 

shape: 渐 变 的 类 型 ,椭圆 形 (ellipse ) 或 者 贺 形 ( circle) . 
3ize: 径 向 渐变 的 大 小 指定 。 

3tart-color: 渐 变 起 始 的 颜色 . 


start-color: 渐 变 终止 的 颜色 . 
center, shape, size 都 是 可 选 参数 , 如果 省 略 , 其 渐变 距离 和 位 置 是 由 容器 的 尺寸 决定 的 .start-color 和 stop-color 为 


7 





7 


必 选 参数 ,颜色 可 以 有 多 个 颜色 值 , 和 线性 渐变 相似 ,每 一 个 颜色 后 面 都 可 以 紧 跟 一 个 百分比 终止 值 , 使 颜色 不 均匀 分 布 . 


【 例 7-6】 《实例 文件 ， ch07\Chap7.6.html) 设置 径 向 渐变 效果 。 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title></title> 

<style> 

div{width:300px;height:200px;border:1lpx solid #000000;float:left; margin-left:15px;} 
.divl{ background:radial-gradient (yellow,blue); } /*# 默 认 center,shape, size 情况 下 效果 */ 
.div2{ background:radial-gradient (circle, yellow 30%,blue 70%); } /* 图 形 渐变 */ 

.div3{ background:radial-gradient (ellipse,yellow 30%,blue 70%); } /* 椭 图形 渐变 */ 
</style> 

</head> 

<body> 

<div class="divl"></div> 

<div class="div2"></div> 

<div class="div3"></div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.6html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-12 所 示 。 
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图 7-12 径 向 渐变 


提示 : 对 于 圆 形 界面 ， 只 需要 指定 一 个 半径 就 可 以 了 ; 对 于 椭圆 类 型 的 径 向 渐变 ， 需 要 同时 指定 横 轴 


和 纵 轴 长 度 中 第 一 个 数值 表示 横 轴 半径 ， 第 二 个 数值 表示 纵 轴 半 径 。 例 如 下 面 代码 : 


.divl{ background:radial-gradient (50px circle,yellow,blue); } /* 半 径 为 50px 的 圆 形 渐变 #/ 
.div2{ background:radial-gradient (50px 100px ellipse,yellow,blue); } /+* 长 度 50px、 高 度 100px 


的 椭圆 形 渐变 */ 
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size 参数 定义 径 向 渐变 结束 形状 大 小 ， 它 有 4 个 可 选 值 ， 属 性 如 表 7-4 所 示 。 


第 项 章 使 用 CSS 3 设计 移动 页 面 样式 


表 7-4 size 参数 可 选 值 

















属 性 说 明 
closest-side 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 离 中 心 点 最 近 的 边 
farthest-side 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 离 中 心 点 最 远 的 边 
closest-corner 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 离 中 心 点 最 远 的 角 
farthest-corner 径 向 渐变 的 半径 长 度 为 从 中 心 点 到 离 中心 点 最 近 的 角 























【 例 7-7】 (实例 文件 : ch07\Chap7.7.html) 利用 径 向 渐变 size 参数 可 选 值 设 置 效果 。 代 码 如 下 : 
<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"><title></title> 

<style> 

div{width:300px;height:150px;float:left;margin:10px 10px;font-size:30px;color:white;} 
.divl {background:-ms-radial-gradient (40% 60%, closest-side, yellow, blue); } 

.div2 {background:-ms-radial-gradient( 40% 60%, farthest-side, yellow, blue); } 

.div3 {backgroum ms-radial-gradient( 40% 60%, closest-corner, yellow, blue); } 
.div4 {background:-ms-radial-gradient( 40% 60%, farthest-corner, yellow, blue); } 
</style> 

</head> 

<body> 

<div class="divl">closest-side</div> 

<div class="div2">farthest-side</div> 

<div class="div3">closest-corner</div> 

<div class="div4">farthest-corner</div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-13 所 示 。 














加 Mocalhost53342/e P- | 国 localhost 
文件 (有 锋 强 (5) 得 看 (V) 收藏 交 (A) 工具 (T) 帮助 (H) 


farthest-side 


Iclosest-corner 








7-13 ”利用 径 向 渐变 size 参数 可 选 值 设置 效果 


repeating-linear-gradient 和 repeating-radial-gradient 分 别 是 线性 渐变 和 径 向 渐变 的 重复 属性 , 使 用 这 两 个 
属性 ， 可 以 轻松 地 实现 条 纹 效 果 。 例 如 下 面 代 码 : 


.divi{ width:100px; height:100px; background:repeating-linear-gradient (45deg, black, yellow 20%, 
green 20% ); } 

.div2{ width:100px; height:100px; background:repeating-radial-gradient (black, yellow 20%, green 
Or 


相关 的 代码 实例 可 参考 Chap7.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-14 所 示 。 
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http://localhost: PC 
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息 100% ~ 
图 7-14 重复 渐变 

2. 阴影 

CSS 阴影 包括 两 类 : 一 类 是 盒子 阴影 ， 另 一 类 是 文字 阴影 。 

语法 : 

box、text-shadow: X,Y,blur,color; 

说 明 : 





XX、Y 分 别 表示 阴影 在 水 平方 向 和 垂直 方向 上 的 位 移 , blur 表示 模糊 的 半径 , 最 后 一 个 表示 阴影 的 颜色 。 
盒子 阴影 的 属性 是 box-shadow， 作 用 对 象 是 盒子 边框 。 盒 子 阴影 的 形状 与 盒子 的 形状 有 关 ， 而 且 加 上 





inset 关键 字 可 以 实现 内 阴影 。 


【 例 7-8】 实 例文 件 ，ch07\Chap7.8.html) 设置 盒子 阴影 。 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title></title> 

<style> 

div{ float:left; margin-left:1l5px; width:200px; height:200px; border:lpx solid black;} 
‘divl{ box-shadow:10px 10px l0px gray; } 

.div2{ box-shadow:-10px -10px 10px gray inset; } 
</style> 

</head> 

<body> 

<div class="divl"> 盒 子 阴 影 </div> 

<div class="div2"> 盒 子 内 阴影 </div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.8.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-15 所 示 。 
另 一 种 阴影 是 文字 阴影 ， 通 过 text-shadow 属性 设置 文字 阴影 相关 的 属性 值 ， 来 实现 一 些 需要 的 字体 阴 





影 效果 ， 其 语法 和 盒子 阴影 类 似 。 
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文字 可 以 设置 多 个 阴影 ， 每 组 阴影 值 由 逗号 隔 开 ， 通 过 多 个 阴影 的 配合 ， 可 以 实现 一 些 有 趣 的 效果 。 
【 例 7-9】 实例 文件 ，ch07\Chap7.9.html)》 设 置 文字 阴影 。 代 码 如 下 : 
<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title></title> 

<style> 

div{ text-align:center; } 

.divl{ color:#ffffff; font-size:50px; text-shadow:3px 3px 2px black; } 
.div2{ margin-top:15px;font-size:50px; color:#ffffff; 

text-shadow:-2px 0px 2px black, 2px Opx 2px black, 

Opx -2px 2px black, Opx 2px 2px black;} /+ 多 个 text-shadow #*/ 


第 项 章 使 用 CSS 3 设计 移动 页 面 样式 


.div3{ margin-top:1l5px; font-size:50px; color:#ffffff; 
text-shadow:1lpx lpx 2px #999,2px 2px 2px #999, 3px 3px 2px #999, 
4px 4px 2px #333, 5px 5px 2px #333;} /# 3d 效 果 */ 

span{ color:red ; } 

</style> 

</head> 

<body> 

<div class="div"> 

<div class="divl"> 文 字 阴影 </div><span>text-shadow</span> 
<div class="div2"> 文 字 阴影 </div><span> 多 个 text-shadow</span> 
<div class="div3"> 文 字 阴 影 </div><span>3d 效果 </span> 

</div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.9.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-16 所 示 。 
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图 7-15 盒子 阴影 图 7-16 文字 阴影 


7.2 CSS 3 布局 之 道 


布局 一 直 是 CSS 中 的 热门 话题 ， 每 次 技术 的 扩展 都 能 掀起 网 页 开发 的 一 股 风 潮 。 新 出 的 CSS 3 布局 新 
技术 自然 也 不 例外 。 


7.2.1 负 边 距 与 浮动 


所 谓 的 负 边 距 就 是 margin 取 负 值 的 情况 ， 如 margin:-10px、margin:-10%。 个 元 泰 与 另 一 个 元 秦 
margin 取 负 值 时 将 拉 近 距离 。 C53 中 的 负 边 距 (negative margin) 是 布局 中 的 一 个 常用 小 技巧 ， 与 浮动 元 
素 相 结合 ， 运 用 得 合理 常常 会 有 意 想不到 的 布局 效果 。 很 多 特殊 的 CSS 布局 者 可 以 通过 负 边 亿 玉 实现 ， 比 
如 经 典 的 圣杯 布局 和 双飞 燕 布局 ， 所 以 掌握 它 的 用 法 是 很 有 必要 的 。 

【 例 7-10】 实例 文件 ，ch07\Chap7.10.html〉》 负 边 距 与 浮动 。 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title></title> 

<style> 

* {margin:0; padding:0;} 

.content, .content-right, .content-left { 
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height:200px; float:left;font-size:50px; color:white;text-align:center;line-height:200px;} 
-Content { width:100%; } 

.content-center {margin-right:200px; margin-left:200px; background:red; 
height:200px;} 

.content-right {margin-left:-200px; width:200px; background:blue;} 
.content-left {margin-left:-100%; width:200px; background:yellow;} 
</style> 

</head> 

<body> 

<div class="content"> 

<div class="content-center">center</div> 

</div> 

<div class="content-right">right</div> 

<div class="content-left">left</div> 


</body> 
</html> 
相关 的 代码 实例 可 参考 Chap7.11.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-17 所 示 。 
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图 7-17 负 边 距 与 浮动 
上 面 的 文档 结构 就 是 双飞 燕 布局 ， 是 left 和 tight 区 域 固定 宽度 ，centent 区 域 出 现在 中 间 且 随 着 窗口 尺寸 
自动 变化 。 基 本 思路 是 让 3 个 盒子 都 向 左 浮动 ， 同 时 将 left 盒子 向 左 “移动 ”( 即 margin-left: -100%)， 这 样 
left 将 会 重 营 在 content 盒子 上 面 并 紧 贴 父 元 素 左边 缘 , right 盒子 也 向 左 “移动 ” 只 是 “移动 ”的 距离 是 200px， 
这 样 就 让 right 紧 贴 父 元 素 的 右边 缘 放置 ，center 盒子 再 施 以 合适 的 左右 边 距 ， 便 可 以 实现 以 上 布局 。 


7.2.2” 自 定义 字体 


自 定义 字体 之 所 以 单独 拿 出 来 ， 是 因为 现在 自 定义 字体 不 仅 能 丰富 网 站 阅读 体验 ， 更 重要 的 是 可 以 在 
一 定 程度 上 代替 图 片 。 试 想 ， 如 果 设 置 网 页 上 显示 的 图 片 就 像 设 置 字体 一 样 ， 而 且 不 影响 它 的 显示 效果 ， 
么 无 论 放 大 、 缩 小 都 :会 影响 它 的 分 辩 率 ， 那 该 是 多 么 美好 的 一 件 事情 啊 ! 



























































































































































自 定义 字体 的 优势 如 下 : 

(1) 字体 图 片 比 一 系列 的 图 片 要 小 ， 如 图 7-18 所 示 。 字 体 图 标 加 载 了， 图标 就 会 马上 泻 染 出 来 ， 不 需 
下 载 一 个 图 片 。 

(2) 字体 图 标 可 以 用 font-size 属性 设置 其 任意 大 小 ， 而 且 不 会 影响 它 的 分 辨 率 ， 还 可 以 加 各 种 文字 效 

















果 ， 包 括 颜色 、 状 态 、 透 明度 、 阴 影 和 翻转 等 ， 如 图 7-19 所 示 。 


图 7-18 字体 图 片 大 小 图 7-19 字体 图 片 设置 效果 
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第 项 章 使 用 CSS 3 设计 移动 页 面 样式 


(3) 兼容 性 很 好 ， 包 括 正 低 版 本 ， 如 表 7-5 所 示 。 
表 7-5 字体 图 片 兼 容 性 




















浏 览 器 支持 情况 
Webkit/Safari(3.2+) TrueType/OpenType TT (ttf) 、OpenType PS (.otf ) 
Opera (10+) | TrueType/OpenType TT (ttf) 、 OpenType PS (.otff) 、 SVG (svg) 
Firefox(3.5+) TrmeType/OpenType TT (ttf)、 OpenType PS (.otff )、 WOFF (since Firefox 3.6) 
Google Chrome TrmeType/OpenType TT (.ttf )、OpenType PS (.otf )、WOFF since version 6 
Internet Explorer 自 下 4 开始 ， 支 持 EOT 格式 的 字体 文件 ，IE9 支持 WOFF 


创造 需要 的 字体 图 片 很 费时 间 ， 在 这 里 就 不 详细 说 明了 。 现 在 假设 有 这 样 一 个 tt 格式 的 icon-cloud- 
download .tt 字体 文件 ， 接 下 来 就 利用 @font-face 声明 一 种 字体 : 
/* 声 明 字体 myfont*/ 
@font-face{ 
font-family:'myfont "'; /* 自 定义 字体 名 称 */ 
src:url('/icon-cloud-download.ttf '); /* 字 体 文件 路 径 */ 

















} 

声明 好 字体 后 ， 便 可 以 在 任意 地 方 使 用 它 了 ， 代 码 如 下 : 
/* 使 用 字体 */ 

div { font-family:'myfont '; } 

p { font-family:'myfont ';} 


关于 自 定义 字体 ， 对 于 前 端 工 程 师 而 言 ， 并 没有 太 多 的 时 间 精 力 去 设计 制作 自己 想 要 的 文字 图 片 ， 往 
往 是 引 些 开源 的 文字 图 片 。 基 本 上 开发 一 个 网 站 需要 的 字体 图 片 ， 都 能 找到 合适 的 字体 图 片 库 ， 如 
Bootstrap 库 。 
下 面 几 种 字体 图 片 是 从 Bootstrap 库 里 剪 切 的 ， 如 图 7-20 所 示 。 更 多 的 Bootstrap 字体 图 片 可 参见 
https://v3.bootess.com/components/。 

首先 去 Bootstrap 官方 网 站 下 载 Bootstrap 包 ， 解 压 完 后 直接 放 入 项 目 中 ， 如 图 7-21 所 示 。 
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图 7-20 字体 图 片 7-21 引入 Bootstrap 包 目 录 


接 下 来 就 是 引入 Bootstrap 到 HTML 页 面 中 ， 详 情 参 考 下 面 的 例子 。 
【 例 7-11】《 实 例文 件 ，ch07\Chap7.11.html) 设 置 字体 图 片 。 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title></title> 

/* 引 入 bootstrap 库 *#/ 
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<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css"/> 
<style> 

if font-size:100px; margin:15px 15px;color:green;} /* 设 置 大 小 、 颜 色 */ 
</style> 

</head> 

<body> 

<!-- 直 接 给 元 素 添加 一 个 类 , 也 就 是 Bootstrap 文字 图 标 下 面 的 一 段 英文 --> 

<i class="glyphicon glyphicon-signal"></i> 

<i class="glyphicon glyphicon-cog"></i> 

<i class="glyphicon glyphicon-trash"></i> 

<i class="glyphicon glyphicon-home"></i> 

<i class="glyphicon glyphicon-file"></i> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.10.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-22 所 示 。 


工 - 0 x 
二 mpi/ocalhost63342/untited /cia 万 ” 已 | 久 localhort x 


文件 站 闫 扩 (E) 豆 看 V) 从 之 夫 你 工具 TT) 帮 动 0 


站 | 医 。， 曾 合 六 


R100% ~ 











7-22 字体 图 片 实例 


Bootstrap 是 一 套 免 费 的 、 开 源 的 字体 图 片 库 ， 它 包括 250 多 个 来 自 Glyphicon Halflings 的 字体 图 标 。 
提供 了 可 缩放 的 矢量 图 标 ， 用 户 可 以 使 用 CSS 3 所 提供 的 所 有 特性 对 它 进 行 更 改 ， 包 括 大 小 、 颜 色 、 阴 影 
或 者 其 他 任何 支持 的 效果 。 所 以 我 们 在 开发 时 ， 可 以 根据 自己 的 需要 去 Bootstrap 库 寻 找 。 


7 2.3 ” 栅 格 系统 与 多 列 布局 


栅 格 系统 是 通过 确定 所 分 的 单位 宽度 及 单位 宽度 之 间 的 间距 ， 把 单位 宽度 进行 组 合 的 一 种 排版 方式 。 
栅 格 系统 是 利用 浮动 实现 的 多 栏 布局 ， 这 里 以 一 个 980px 的 宽度 实现 4 列 的 栅 格 系统 。 
【 例 7-12】《 实 例文 件 ，ch07\Chap7.12.html) 栅 格 系统 。 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title></title> 

<style> 

* { padding:0; margin:0; } 

html, body { height:100%; } 

#container { width:980px; margin:0 auto; height:90%; font-size:150px;} 

#container div { height:100%; } 

.coll { width:25%; background:lightgreen; float:left; } 

5%; background:lightblue; float:left; } 
:25%; background:1lightcoral; float:left; } 

.col4 { width:25%; background:yellow; float:left; } 

</style> 

</head> 

<body> 

<div id="container"> 

<div class="coll">1</div> 

<div class="col2">2</div> 

<div class="col3">3</div> 

<div class="col4">4</div> 

</div> 
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</body> 
</html> 





相关 的 代码 实例 可 参考 Chap7.12.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-23 所 示 。 


BB 








7-23” 栅 格 系统 


同样 的 原理 ， 可 以 扩展 到 8 列 、12 列 等 任意 的 栅 格 系统 。 

栅 格 系统 并 没有 实现 分 栏 效果 ，CSS 3 为 了 满足 这 个 要 求 增 加 了 多 列 布局 ， 其 是 网 页 中 块 状 布局 模式 的 
有 力 扩展 。 多 列 布局 能 够 让 开发 者 轻松 地 使 文本 呈现 多 列 显示 。 实 现 多 列 布局 模块 常用 的 CSS 3 属性 如 下 : 

column-count: 设置 列 数 ， 用 整数 值 来 定义 列 数 ， 不 允许 负 值 。 

column-gap: 设置 列 与 列 之 间 的 间距 。 

column-rule: 设置 列 与 列 之 间 的 边框 ， 与 border 属性 类 似 。 

column-width: ”设置 每 列 的 宽度 。 

【 例 7-13】〔 实 例文 件 ，ch07\Chap7.13.html》 多 列 布局 。 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title> 多 栏 布局 </title> 

<style> 

*{ margin:0; padding:0; } 

divt{ 

width:1000px; height:200px; margin:0 auto; 
background:#cccccc; text-indent:2em; 

text-align:justify; /* 两 端 对 齐 */ 

-webkit-column-count:4; /* 此 属性 有 兼容 性 记得 加 个 浏览 器 的 兼容 性 分 4 栏 */ 
-webkit-column-gap:30px; /# 栏 间距 #/ 
-webkit-column-rule:3px solid black; /* 列 与 列 之 间 的 边框 样式 */ 





} 
</style> 
</head> 
<body> 


<div> 燕 子 去 了 ,有 四 来 的 时 候 ; 杨 柳 枯 了 ,有 再 青 的 时 候 ; 桃 花 谢 了 ,有 再 开 的 时 候 . 但 是 ,聪明 的 ,你 告诉 我 , 我们 的 日 子 为 什 
么 一 去 不 复 返 呢 ? 是 有 人 偷 了 他 们 罢 : 那 是 谁 ?又 藏 在 何 处 呢 ? 是 他 们 自己 逃走 了 罢 :现在 又 到 了 哪里 呢 ? 我 不 知道 他 们 给 了 我 多 少 日 子 ; 
但 我 的 手 确 乎 是 渐渐 空虚 了 .在 默默 里 算 着 , 八 千 多 日 子 已 经 从 我 手中 溜 去 ? 像 针尖 上 一 滴水 滴 在 大 海里 ,我 的 日 子 滴 在 时 间 的 流 里 ， 
没有 声音 ,也 没有 影子 .我 不 禁 头 沙 小 而 泪 浇 济 了 .去 的 尽管 去 了 ,来 的 尽管 来 着 ; 去 来 的 中 间 , 又 怎样 地 匆匆 呢 ? 早 上 我 起 来 的 时 候 ， 
小 屋 里 射 进 两 三 方 锋 斜 的 太阳 .太阳 他 有 肢 啊 , 轻 轻 悄悄 地 挪移 了 ;我 也 菱 茫然 跟着 旋转 .于 是 一 一 洗手 的 时 候 , 日 子 从 水 盆 里 过 去 ; 吃 
饭 的 时 候 , 日 子 从 饭碗 里 过 去 ;默默 时 , 便 从 凝 然 的 双眼 前 过 去 .我 觉察 他 去 的 匆匆 了 , 伸 出 手 造 挽 时 , 他 又 从 区 挽 着 的 手边 过 去 , 天 黑 
时 ,我 躺 在 床上 , 他 便 伶 伶 便便 地 从 我 身上 跨 过 , 从 我 脚 边 飞 去 了 -等 我 降 开眼 和 太阳 再 见 , 这 算 又 溜 走 了 一 日 .我 掩 着 面 叹息 .但 是 新 
来 的 日 子 的 影 儿 又 开始 在 叹息 里 闪 过 了 

Re 选 自 《 朱 自 清 散 文集 》</p> 


</div> 
</body> 
</html> 
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相关 的 代码 实例 可 参考 Chap7.13.html 文件 ， 在 Chrome 浏览 器 中 运行 的 结果 如 图 7-24 所 示 。 
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图 7-24 多 列 布局 
栅 格 系统 和 多 列 布局 的 应 用 ， 使 网 页 界面 设计 更 加 规范 和 美观 ， 人 


了 然 地 阅读 网 页 信息 ， 而 且 对 网 页 设计 师 来 说 ， 在 各 种 视觉 元 素 的 运用 组 合 排列 中 ， 既 提高 工作 效率 ， 
满足 了 大 众 需 






































7.3 ”弹性 盒子 布局 


CSS 3 引入 了 新 的 盒 模型 处 理 机 制 一 一 弹性 盒 模型 (Flexible Box)。 引 入 弹性 盒 布局 模型 的 目的 是 实现 
盒 元 素 内 部 的 多 种 布局 ， 包 括 排列 方向 、 排 列 顺序 、 空 间 分 配 和 对 齐 方式 等 。 现 在 大 多 的 主流 浏览 器 还 不 
支持 弹性 盒 布 局 ， 基 于 webkit 内 核 的 浏览 器 ， 需 要 加 上 前 缀 -webkit-， 基 于 gecko 内 核 的 浏览 器 ， 需 要 加 上 
前 缀 -moz-。CSS 3 为 弹性 盒 布 局 样式 ， 新 增 了 8 个 属性 ， 如 表 7-6 所 示 。 








表 7-6 CSS 3 新 增 盒子 模型 属性 

















属 性 名 描述 
box-orient 定义 盒子 分 布 的 坐标 轴 
box-align 定义 子 元 素 在 盒子 内 垂直 方向 上 的 空间 分 配方 式 
box-direction 定义 盒子 的 显示 顺序 
box-flex 定义 子 元 素 在 盒子 内 的 自 适应 尺寸 
box-flex-group 将 自 适应 元 素 分 配 到 柔性 分 组 
box-lines 定义 子 元 素 分 布 显示 
box-ordinal-group 定义 子 元 素 在 盒子 内 的 显示 位 置 
box-pack 定义 子 元 素 在 盒子 内 的 水 平方 向 上 的 空间 分 配方 式 






7.3.1 盒子 布局 取向 


盒子 布局 取向 〈box-orient) 属性 用 于 定义 盒子 元 素 内 部 的 流动 布局 方向 ， 包 括 横 排 (horizional) 和 坚 排 
Cvertical) 两 种 。 
语法 格式 如 下 : 


box-orient:horizontal | vertical | inline-axis | block-axis | inherit 
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box-orient 属性 值 如 表 7-7 所 示 。 


表 7-7 box-orient 属性 值 


动 页 面 样式 











属 性 值 说 明 
horizontal 盒子 元 素 从 左 到 右 在 一 条 水 平 线 上 显示 它 的 子 元 素 
vertical 盒子 元 素 从 上 到 下 在 一 条 垂直 线 上 显示 它 的 子 元 素 


盒子 元 素 沿 着 内 联 轴 显 示 它 的 子 元 素 





block-axis 盒子 元 素 沿 着 块 轴 显示 它 的 子 元 素 





【 例 7-14】 〈 实 例文 件 ，ch7\7.14.html) box-orient 属性 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>box-orient</title> 
<style> 


div{height:50px’;text-align:center;font-size:50px;color:white;line-height:100px; width:600Px7 


height:100px;} 
.divl{background-color:#F6F;} 
.div2{background-color:#3F9;} 
.div3{background-color:#FCd;} 


bodyt{ 

display:box; /* 标 准 声明 ,盒子 显示 */ 
display:-moz-box’; /* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
box-orient:vertical; /* 定 义 元 素 为 盒子 显示 */ 
-moz-box-orient:vertical; /*# 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
</style> 

</head> 

<body> 


<div class="divl"> 上 上 </div> 
<div class="div2"> 中 </div> 
<div class="div3"> 下 </div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap7.14.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-25 所 示 。 


QG 个 © localhost:6: 














图 7-25 盒子 元 素 水 平 并 列 显 示 
在 弹性 盒子 里 ， 元 素 默认 是 水 平 排列 ， 在 元 素 中 添加 box-orient:vertical 属性 类 别 ， 这 时 元 素 会 














EE 直 排 列 。 
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ss 


7.3.2 ”盒子 布局 顺序 


在 盒子 布局 下 ，box-direction 可 以 设置 盒子 元 素 内 部 的 排列 顺序 为 正 向 或 者 反 向 。 
语法 格式 如 下 : 
box-direction:normal | reverse | inherit 


box-direction 属性 值 如 表 7-8 所 示 。 














表 7-8 box-direction 属性 值 





属 性 值 说 明 





正常 显示 顺序 , 即 如 果 盒子 元 素 的 box-orient 属性 值 为 horizontal, 则 其 包含 的 子 元 素 按照 从 左 到 右 的 
normal 顺序 显示 ， 即 每 个 子 元 素 的 左边 总 是 靠近 前 一 个 子 元 素 的 右边 ， 如 果 盒子 元 素 的 box-orient 属性 值 为 
vertical， 则 其 包含 的 子 元 素 按照 从 上 到 下 的 顺序 显示 





反 向 显示 ， 盒 子 所 包含 的 子 元 素 的 显示 顺序 将 与 normal 相反 





Teverse 
inherit 继承 上 级 元 素 的 显示 顺序 
【 例 7-15】 《实例 文件 ，ch7\7.15.html) box-direction 属性 实例 。 代 码 如 下 : 
<html> 
<head> 


<meta charset="UTF-8"> 

<title>box-direction</title> 

<style> 
div{height:50px;text-align:center;font-size:50px;color:white;line-height:500px;} 
.divl{background-color:#F6F;width:180px;height:500px} 
.div2{background-color:#3F9;width:600px;height:500px} 
.div3{background-color:#FCd;width:180px;height:500px} 
body{display:box;/* 标 准 声 明 , 盒子 显示 */ 

display:-moz-box;/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
-moz-box-direction:reverse;/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
box-direction:reverse;/* 标 准 声 明 , 例子 显示 */ 

} 

</style> 

</head> 

<body> 

<div class="divl"> 左 侧 </div> 

<div class="div2"> 中 间 </div> 

<div class="div3"> 右 侧 </div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.15.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-26 所 示 。 





左 侧 





图 7-26 设置 盒子 布局 顺序 后 的 效果 
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为 盒子 添加 了 box-direction 属性 ， 并 添加 reverse 值 ， 就 出 现 了 上 面 反 向 排列 的 情况 。 


7.3.3 ”盒子 布局 位 置 


box-ordinal-group 属性 相对 于 box-direction 属性 来 说 ， 其 可 以 设置 每 个 盒子 的 排列 顺序 ， 确 定子 元 素 的 
准确 位 置 。 

语法 格式 如 下 : 

box-ordinal_group:<integer> 

box-ordinal-group 属性 取 值 是 一 个 自然 数 ， 从 1 开始 ， 用 来 设置 子 元 素 的 位 置 序号 。 子 元 素 的 位 置 将 根 
据 这 个 属性 值 从 小 到 大 进行 排列 。 在 默认 情况 下 ， 子 元 素 将 根据 元 素 的 位 置 进行 排列 。 对 于 没有 指定 
box-ordinal-group 属性 值 的 子 元 素 ， 它 的 序号 默认 为 1。 并且 序号 相同 的 子 元 素 将 按照 文档 中 加 载 的 顺序 进 
行 排列 。 

【 例 7-16】 《实例 文件 ，ch7\7.16.html) box-ordinal-group 属性 实例 。 代 码 如 下 : 


<html><head> 
<title>box-ordinal-group</title> 

<style> 

body{ 
margin:0;padding:0;text-align:center;background-color:#d9bfe8;color:white; 
.boxt{ 
margin:auto;text-align:center;width:100%; 
font-size:50px;display:-moz-box; 
-moz-box-orient:vertical; 

} 

.divli 

-moz-box-ordinal-group:2;/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
box-ordinal-group:2;/* 标 准 声明 ,盒子 显示 *#/ 
height:100px;width:200px; 

background:red; 

.div2{ 
height:100px;width:200px;background:blue; 
-moz-box-ordinal-group:3; 
box-ordinal-group:3; 

} 

.div3{-moz-box-ordinal-group:1; 
height:100px;width:200px; 
background:green; 

} 

.div41{ 

width:200px;height:100px; background:orange; 
-moz-box-ordinal-group:4; 

} 

</style> 

</head> 

<body> 

<div class='box'> 

<div class="divl">1</div> 

<div class="div2">2</div> 

<div class="div3">3</div> 

<div class="div4">4</div> 

</div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.16.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-27 所 示 。 
































7 
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4 








7-27 ”设置 层 的 显示 顺序 


在 上 面 的 文档 中 ， 分 别 为 .div1、.div2、.div3、.div4 设置 了 box-ordinal-group 属性 值 >、3、1、4， 则 在 
Firefox 浏览 器 中 显示 的 顺序 ， 就 变 成 了 .div3、.div1、.div2、.div4。 


党 7.3.4 盒子 弹性 空间 


box-flex 定义 了 子 元 素 的 空间 弹性 ,能够 灵活 地 控制 子 元 素 在 盒子 中 的 显示 空间 。 显 示 空间 包括 子 元 素 
的 宽度 和 高 度 ， 也 可 以 说 是 子 元 素 在 盒子 中 所 占 的 面积 。 当 弹性 盒 元 素 尺寸 缩小 或 变 大 时 ， 子 元 素 也 会 随 
缩小 或 变 大 ， 弹 性 盒 元 素 多 出 的 空余 空间 ， 子 元 素 会 扩大 来 填补 。 
语法 格式 如 下 : 
box-flex:<number> 
<number> 属 性 值 是 一 个 整数 或 者 小 数 , 不 可 以 为 负数 ， 默认 值 为 0。 当 盒子 中 包含 多 个 定义 了 box-flex 
属性 的 子 元 素 时 ， 浏 览 器 将 会 把 这 些 子 元 素 的 box-flex 属性 值 相 加 ， 然 后 根据 它们 各 自 的 值 占 总 值 的 比例 









































来 分 配 盒子 剩余 的 空间 。 

box-flex 属性 只 有 在 盒子 拥有 确定 的 空间 大 小 时 才能 正确 运用 ,所 以 弹性 盒子 需 有 具体 的 width 和 height 
属性 值 。 

【 例 7-17】 实例 文件 ，ch7\7.17.html〉》box-flex 属性 实例 。 代 码 如 下 : 

3 


<meta charset="UTF-8"> 

<title>box-flex</title> 

<style> 
body{margin:0;padding:0;text-align:center;} 
.boxt{ 

width:800px;font-size:40px;color:white; 
text-align:center; overflow:hidden; 
display:box; /*# 标 准 声明 ,盒子 显示 #/ 
display:-moz-boxy/# 兼 容 Mozilla Gecko 引擎 浏览 器 */ 


.divl{background-color:#F6F;-moz-box-flex:2;box-flex:2;} 
.box>div{ margin-left:5px;height:300px;line-height:300px; } 
.div2{-moz-box-flex:4;box-flex:4;background-color:#3F9;} 
-div3{-moz-box-flex:2;box-flex:2;background-color:#FCd;} 
</style> 

</head> 

<body> 

<div class="box"> 

<div class="div1"> 左 侧 </div> 
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<xdiv class="div2"> 中 间 </div> 
<div class="div3"> 右 侧 </div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap7.17.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-28 所 示 。 

注意 : box-flex 只 是 动态 分 配 父 元 素 的 剩余 空间 ， 而 不 是 父 元 素 的 空间 。 如 上 面 的 文档 ， 父 元 素 .box 
的 宽度 为 800px， 如 果 你 认为 div1、div2 和 div3 的 宽度 分 别 为 200px、400px、200px， 那 么 就 错 了 ， 因 
为 box-flex 只 是 分 配 父 元 素 的 剩余 空间 ，div1、div2 和 div3c 所 分 到 的 应 该 是 父 元 素 内 容 以 外 所 剩余 下 来 
的 宽度 。 


> C 个 D localhost:63342/anli/8/box-flex html? it=2hs ”~ 国信 疏 回 三 








7-28 ”设置 盒子 空间 





7.3.5 ”管理 盒子 空间 


回 
box-pack 属性 和 box-align 属性 ， 分 别 用 于 定义 弹性 盒 元 素 内 子 元 素 的 水 平方 向 和 垂直 方向 上 的 富余 空 
间 管 理 方式 ， 对 弹性 盒 元 素 内 部 的 文字 、 图 形 及 子 元 素 都 是 有 效 的 。 
box-pack 属性 可 以 用 于 设置 子 容器 在 水 平 轴 上 的 空间 分 配方 式 。 语 法 格式 如 下 : 
box-pack:startlendlcenter1justify 


其 属性 值 含 义 如 表 7-9 所 示 。 





























表 7-9 box-pack 属性 值 











属 性 值 说 ”有明 

start 所 有 子 容器 都 分 布 在 父 容器 的 左 侧 ， 右 例 留 空 

end 所 有 子 容器 都 分 布 在 父 容器 的 右 侧 ， 左 侧 留 空 

justify 所 有 子 容器 平均 分 布 〈 黑 认 值 ) 

center 平均 分 配 父 容器 剩余 的 空间 〈 能 压缩 子 容 器 的 大 小 ， 并 且 有 全 局 居中 的 效果 ) 














box-align 属性 管理 子 容器 在 竖 轴 上 的 空间 分 配方 式 。 
语法 格式 如 下 : 
box-align:startlend|lcenterlbaseline|stretch 


其 属性 值 含义 如 表 7-10 所 示 。 
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表 7-10 box-align 属性 值 


























属性 值 | 说 明 

it | 子 容器 从 父 容器 项 部 开始 排列 ， 富 余 空间 显示 在 盒子 底部 

i | 子 容器 从 父 容器 底部 开始 排列 ， 富 余 空间 显示 在 盒子 顶部 

es | 子 容器 横向 居中 ， 富 余 空间 在 子 容器 两 侧 分 配 ， 上 面 一 半 下 面 一 半 
baseline | 所 有 盒子 沿 着 它们 的 基线 排列 ,富余 的 空间 可 前 可 后 显示 





stretch 每 个 子 元 素 的 高 度 被 调整 到 适合 盒子 的 高 度 显 示 。 即 所 有 子 容器 和 父 容器 保持 同一 高 度 






































元 素 垂直 居中 显示 , 是 老生 常 谈 的 问题 , 但 都 不 是 很 让 人 满意 , 需要 大 量 代码 , 使 用 CSS 3 新 增 的 box-pack、 
box-align 属性 ， 可 以 很 轻松 地 解决 。 
【 例 7-18】 “〈 实 例文 件 ，ch7\7.18.html) box-pack、box-align 属性 实例 。 代 码 如 下 : 


<html> 

<head> 

<meta charset="UTF-8"> 
<title>box-pack、 box-align</title> 
<style> 

body,html {height:100%;width:100%;} 
bodyt{ 

margin:0;padding:0; 
display:box;/* 标 准 声 明 , 盒子 显示 */ 
display:-moz-box;/* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
-moz-box-pack:center; 
box-pack:center; 
-moz-box-align:center; 
box-align:center; 

} 

"box{ width:200px;height:200px;background:red; } 
</style> 

</head> 

<body> 

<div class="box"></div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.18.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-29 所 示 。 


Cn D) localhost-63342/anli/8/b “国会 只 回 = 




















| 


图 7-29 设置 盒子 垂直 居中 显示 


在 上 面 的 文档 中 ,分 别 为 弹性 盒子 的 子 元 素 设置 了 box-pack:center 和 box-align:center， 轻 松 解决 了 水 
E 直 居中 的 问题 。 














je 
长 
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7.3.6 ”空间 溢出 管理 


box-lines 属性 用 来 避免 空间 溢出 的 问题 。 语 法 格式 如 下 : 

box-lines:singlelmultiple 

其 中 参数 值 single 表示 子 元 素 都 单行 或 单列 显示 ，multiple 表示 子 元 素 可 以 多 行 或 多 列 显示 。 
【 例 7-19】 《实例 文件 :ch7\7.19.html) box-lines 属性 实例 。 代 码 如 下 : 


<html> 

<head> 

<meta charset="UTF-8"> 
<title>box-lines</title> 
<style> 

.testboxt{ 
width:400px;margin:40px auto;padding:20px; 
background:#f0f3f9; 
display:-moz-box; 
display:box; 
-moz-box-lines:multiple; 
box-lines:multiple; 












































} 

| 

width:150px; height:150px; 
font-size:30px;color:white; 
background: red; 
margin-left:15px; 
text-align:center; 
line-height:150px; 

} 

</style> 

</head> 

<body> 

<div class="testbox"> 
list">1</div> 
list">2</div> 
list">3</div> 


<div clas 
<div clas 
<div class= 
</div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap7.19.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-30 所 示 。 








因 boeines x 


[人 localhost63342/anli/8/t 加 位 oO 三 


7-30 溢出 管理 


从 上 面 的 文档 可 以 发 现 ， 设 置 box-lines 属性 没 起 作用 。 
用 该 属性 。 


























中 


为 现在 所 有 主流 浏览 器 都 不 支持 ， 所 以 不 
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7.4 让 页 面 动 起 来 


在 网 页 的 设计 中 适当 加 入 动画 ， 可 以 使 网 页 更 富有 动感 ， 给 用 户 带 来 更 好 的 体验 。 随 着 网 页 设计 的 发 
展 ， 对 动画 要 求 也 越 来 越 高 ，JavaScript 的 动画 效果 从 性 能 和 实现 上 都 不 是 很 “友好 ”。CSS 3 动画 模块 的 提 
出 ， 是 革命 性 的 ， 配 合 CSS 3 的 变形 模块 ， 设 计 人 员 可 以 更 轻易 地 设计 出 复杂 而 优美 的 动画 效果 。 


各 7 4.1 CSS 3 变形 模块 


CSS 3 变形 模块 (transform 提供 了 对 页 面 文字 和 图 片 进行 旋转 、 位 移 、 倾 祥和 缩放 等 一 部 分 功能 .transform 
和 transform-origin 是 CSS 3 变形 的 两 个 主要 属性 ，transform 指定 元 素 进行 变形 的 类 型 ，transform-origin 指定 
元 素 变形 的 起 始点 。 

transform 语法 如 下 : 

transform:none | transform-functions; 

。 none: 默认 值 ， 不 设置 任何 变形 函数 。 

。 transform-functions: 可 以 设置 一 个 或 一 个 以 上 的 变形 函数 。 

CSS 3 变形 模块 是 由 变形 函数 来 控制 的 ，2D 变形 函数 属性 如 表 7-11 所 示 。 














表 7-11 2D 变形 函数 属性 


2D 变形 函数 描述 





angle 规定 角度 ， 这 个 值 为 正 值 ， 元 素 相对 原点 中 心 顺 时 针 旋转 ， 如 果 这 个 值 为 负 值 ， 元 素 
oe 相对 原点 中 心 逆 时 针 旋转 
translate(x,y) xy 规定 沿 着 义 轴 和 YY 轴 移 动 的 位 移 
translateX(x) x 规定 沿 着 义 轴 移 动 的 位 移 
translateY(y) y 规 定 沿 着 Y 轴 移动 的 位 移 
skew(x-angle.y-angle) x-angle.y-angle 规定 沿 着 X 和 倾斜 的 倾斜 角度 
skewX(angle) angle 规定 沿 着 义 轴 的 倾斜 角度 
skewY(angle) angle 规定 沿 着 立轴 的 倾斜 角度 
scale(x,y) X.y 规定 沿 着 义 轴 和 YY 轴 的 缩放 比例 
scaleX(x) XxX 规定 沿 着 义 轴 的 缩放 比例 
scaleY(y) 了 规定 沿 着 Y 轴 的 缩放 比例 





注意 : rotate0 函 数 角度 参数 ， 如 果 这 个 值 为 正 值 ， 元 素 相对 原点 中 心 顺 时 针 旋 转 ; 如 果 这 个 值 为 负 值 ， 
元 素 相 对 原点 中 心 逆 时 针 旋转 。scale0 的 取 值 默认 值 为 1， 当 值 设 置 为 0.01 一 0.99 时 ， 作 用 是 让 一 个 元 素 缩 
小 ; 而 任何 大 于 或 等 于 1.01 的 值 ， 作 用 是 让 元 素 放大 。 当 取 值 为 负数 时 ， 元 素 会 被 翻转 。 

【 例 7-20】 “实例 文件 :ch7\7.20.html) 2D 变形 实例 。 代 码 如 下 : 

<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title></title> 


<style> 
div{ position:absolute; top:30px;color:white;} 
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.divl{ transform:rotate(45deg) ;width:100px;height:100px;background:red; left:50px; } 
.div2{ width:100px;height:100px;left:50px; } 

.div3{ transform:translate (20px);width:100px; height:100px;background:red; left:250px; } 
.div4{ width:100px; height:100px; left:250px; } 

.div5{ transform:skew(30deg); width:100px; height:100px; background:red; left:450px; } 
-div6{ width:100px; height:100px;left:450px; } 

-div7{ transform:scale(1.2,1.2);width:100px; height:100px;background:red; left:650px; } 
-div8{ width:100px; height:100px;left:650px; } 

-div9{border:1lpx dashed black;} 

</style> 

</head> 

<body> 

<div class="div1"> 旋 转 </div> 

<div class="div2 div9"></div> 

<div class="div3"> 位 移 </div> 

<div class="div4 div9"></div> 

<div class="div5"> 倾 斜 </div> 

<div class="div6 div9"></div> 

<div class="div7"> 缩 放 </div> 

<div class="div8 div9"></div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.20.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-31 所 示 。 





国 hepy/ecolhost 63342/oni/1 /perl -97tbske PD ~ || 国 locahou 


妆 件 有 有 妨 卉 F] 下 看 必 大 A 工 员 [机 即 H) 





图 7-31 2D 变形 
通过 设置 transform-origin， 可 以 指定 元 素 变 形 所 基于 的 原点 。 例 如 下 面 代 码 : 


.divl { transform-origin:top left; transform:rotate (45deg) ;width:100px;height:100px;background:red; 
left:100px; } 

.div7 { transform-origin:top left; transform:scale (1.2,1.2) ;width:100px; 
height:100px;background:red; left:250px; } 


相关 的 代码 实例 可 参考 Chap7.20.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-32 所 示 。 


- 0O x 
园 httpi/localhost6334 P - 上 加 localhos 








文件 (有 ”篇 名) 查看 (V) 收 套 夫 (A) ”工具 (D 帮助 (H) 








下 100% ~ 


图 7-32 基于 的 原点 变形 


transform 和 transform-origin 不 仅 支持 上 面 所 讲 的 2D 变形 ， 也 支持 3D 变形 ，3D 变形 也 就 是 在 2D 变 

形 函 数 后 面 加 上 3D 的 后 缀 : 
。 transform: translate3d (x,，y，z)，x、y、z 分 别 表示 对 象 基于 X、Y、Z 坐标 轴 的 移动 距离 。 
。 transform: scale3d (x,，y，z)，x、y、z 分 别 表示 对 象 基于 义 、Y、Z 坐标 轴 的 缩放 倍数 。 
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。 transform: rotate3d (x，y，z，angle)，x、y、z 分 别 表示 对 象 旋转 基于 X、Y、Z 坐标 轴 的 坐标 ， 
angle 表示 旋转 的 角度 。 

【 例 7-21】 实例 文件 ，ch7\7.21.html〉》3D 变形 实例 。 代 码 如 下 : 

<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title></title> 

<style> 

.boxt{ 

width:250px;height:250px;float:left;color:white; 

margin:30px 30px;-webkit-perspective:500px; 

border:1lpx dashed black; 

L 

.divli 

-webkit-transform:scale3d(0.8,1.1,0.5) 7 

background:blue;width:100%;height:100%;font-size:28px; 

} 

-div2{ 

-webkit-transform:translate3d(10px, 10px, -50px); 

background:blue;width:100%;height:100%;font-size:20px; 

} 

.div3{ 

-webkit-transform:rotate3d(20,20,20,45deg) ; font-size:24px; 

background:blue;width:100%;height:100%; 

} 

</style> 

</head> 

<body> 

<div class="box"><div class="divl">scale3d(0.8,1.1,0.5)</div></div> 








<div clas box"><div class="div2">translate3d(10px,10px,-50px)</div></div> 
<div clas box"><div class="div3">rotate3d(20,20,20,45deg) </div></div> 
</body> 

</html> 





相关 的 代码 实例 可 参考 Chap7.21.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-33 所 示 。 


ean localhost 下 加 全 汶 回 三 


translatc3d( 1 opx, 10px,-5Opx) 











图 7-33 3D 变形 


从 上 面 例子 可 以 看 到 ，perspective 属性 对 于 3D 变形 来 说 至 ， 它 表示 元 素 的 深度 ， 决 定 看 到 的 是 
2D 还 是 3D 效果 。perspective 属性 会 设置 观看 者 的 并 将 可 视 内 容 映射 到 一 个 视 锥 上 ， 继 而 投 到 一 个 
2D 视 平 面 上 。 如 果 不 指定 透视 , 则 Z 轴 的 所 有 点 将 平 铺 到 同一 个 2D 平面 中 ,也 就 无 法 看 见 3D 变形 效果 。 
其 实 对 于 perspective 属性 ， 我 们 可 以 理解 为 视 距 ， 用 来 设置 用 户 和 3D 空间 Z 平面 之 间 的 距离 。 视 距 值 越 
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小 , 用 户 与 3D 空间 Z 平面 的 距离 越 近 ， 则 视觉 效果 就 很 大 ; 反之 , 值 越 大 ， 用 户 与 3D 空间 Z 
远 ， 视 觉 效 果 就 很 小 。 

perspective-origin 属性 是 另 一 个 3D 变形 属性 ， 用 来 设置 perspective 的 位 置 ， 就 比如 在 看 电视 ， 不 可 能 
一 直 坐 在 一 个 位 置 上 看 一 样 ， 有 时 会 坐 在 不 同 的 位 置 上 看 。 下 面 来 看 一 个 简单 实例 一 一 正六 面体 。 

【 例 7-22】 实例 文件 ，ch7\7.22.html》 正 六 面体 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 





距离 越 






























































<head> 

<meta charset="UTF-8"> 
<title></title> 

<style> 

.3tage{ -webkit-perspective:800px; } 
.Cube { 


font-size:100px; width:200px; margin:120px auto; 
-webkit-transform-style:preserve-3d; 
transform:rotateX(-30deg) rotateY(30deg) ; 
transform-origin:-200px 100px; 

} 

.boxt{ 

position:absolute; width:200px; 
height:200px;color:white; 

text-align:center; line-height:200px; 

} 

"front{transform:translateZ (100px); background:rgba(255, 182, 193, 0.8); } 

‘top{ transform:rotateX(90deg) translate2 (100px);background:rgba(128, 0, 128, 0.8);} 
.right{transform:rotateX(-90deg) translate2 (100px);background:rgba(0, 0, 255, 1); } 
.left{transform:rotateY (-90deg) translate2 (100px);background:rgba(0, 255, 0, 0.8); } 
.back{transform:rotateY (180deg) translateZz(100px); background:rgba(255, 140, 0, 1);} 
.bottom{ transform:rotateY (90deg) translate2 (100px);background:rgba(105, 105, 105, 1); } 
</style> 

</head> 

<body> 

<div class="stage"> 

<div class="cube"> 

<div class="box front">1</div> | “ET | 
<div class="box back">2</div> © | 9 localho: 收回 人 三 
<div class="box right">3</div> 
<div class="box left">4</div> 
<div class="box top">5</div> 
<div class="box bottom">6</div> 
</div> 

</div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.22.html 文件 , 在 Firefox 浏览 
器 中 运行 的 结果 如 图 7-34 所 示 。 图 7-34 正六 面体 


7.4.2 CSS 过渡 属性 
在 CSS 3 中 ， 有 时 为 了 添加 从 一 种 样式 转变 到 另 一 种 样式 的 特殊 效果 ， 可 以 无 须 使 用 Flash 动画 或 
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JavaScript, 这 就 需要 使 用 CSS 的 过 渡 属 性 了 。CSS 3 过 渡 是 元 素 从 一 种 样式 逐渐 改变 为 另 一 种 样式 的 效果 。 
要 实现 这 一 点 ， 就 必须 规定 两 项 内 容 ， 分 别 是 指定 要 添加 效果 的 CSS 3 属性 和 指定 效果 的 持续 时 间 。CSS 3 
的 过 渡 属 性 如 表 7-12 所 示 。 

















表 7-12 CSS 3 的 过 渡 属性 




















属 性 描 述 
transition 简写 属性 ， 用 于 在 一 个 属性 中 设置 4 个 过 渡 属 性 
transition-property 规定 应 用 过 渡 的 CSS 属性 的 名 称 
transition-duration 定义 过 渡 效 果 花 费 的 时 间 ， 默 认 是 0 
transition-timing-function 规定 过 渡 效 果 的 时 间 曲 线 ， 默 认 是 ease 
transition-delay 规定 过 渡 效 果 何 时 开始 ， 默 认 是 0 
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【 例 7-23】 实例 文件 ，ch7\7.23.html〉CSS 3 的 过 渡 属 性 transition 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title>CSS3 过 渡 </title> 

<style> 

div { 
width:120px;height:100px;background:#AEEEEE; 
-webkit-transition:width 2s, height 2s， 
-webkit-transform 2s; 

transition:width 2s, height 2s, transform 137 
} 

div:hover { 
width:180px;height:120px;background:#9BCD9B; 
-webkit-transform:rotate(l80deg); 
transform:rotate (180deg); 

} 

</style> 

</head> 

<body> 

<div> 

<h3>CSS3 过 渡 </h3> 

</div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.23.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-35、 图 7-36 所 示 。 














加 cssai 注 x 


QC OD localho 











图 7-35 过 渡 前 图 7-36 过渡 中 
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7.4.3 CSS 动画 属性 


从 7.4.2 节 可 以 看 到 ， 过 渡 transition 有 着 它 的 局 限 性 ， 虽 然 简单 ， 但 是 它 只 能 在 两 个 状态 之 间 改 变 ， 
并 且 需 要 事件 的 驱动 才能 够 进行 ， 不 能 自己 运动 。 除 此 之 外 ，CSS 3 还 提供 了 另 一 个 动画 属性 animation， 
它 相 较 于 transition 有 更 强大 的 功能 。 

要 创建 CSS 3 动画 ， 必 须 先 了 解 @keyframes 规则 。@keyframes 规则 是 创建 动画 ， 在 @keyframes 中 规 
定 某 项 CSS 样式 ， 就 能 创建 由 当前 样式 逐渐 变 成 新 样式 的 动画 效果 。 

创建 动画 ， 指 定 关键 帧 ， 语 法 如 下 : 

QBkeyframes [动画 名 ] { 

开始 帧 : 0% 或 者 from{ 动画 开始 的 样式 } 

50%{50% 的 样式 } 


结束 帧 :100% 或 者 to{ 结 束 时 的 样式 } 
} 


创建 完 动画 ， 接 下 来 就 可 以 使 用 动画 了 。 先 要 通过 animation 属性 绑 定 一 个 选择 器 ， 并 至 少 指定 
animation-name (动画 名 ) 和 animation-duration (动画 时 间 )， 动 画 才能 有 效果 。animation 是 一 个 综合 属性 ， 


其 他 属性 如 表 7-13 所 示 。 















































表 7-13 animation 属性 


属 性 描 述 








animation-name 指定 动画 名 称 
animation-duration 指定 动画 播放 一 遍 的 时 间 ， 默 认 是 0 
animation-delay 指定 动画 开始 时 的 延迟 
animation-interation-count 指定 动画 播放 的 遍 数 ， 取 值 为 数值 或 者 为 infinite 
animation-direction 指定 动画 的 播放 方向 ， 默 认 是 normal，reverse 有 方向 
animation-timing-function 指定 动画 的 速度 曲线 ， 默 认 ease 缓 动 
animation-play-state 指定 动画 的 运行 或 暂停 ， 默 认 是 ntmning 
lt 指定 当 动画 不 播放 时 ， 元 素 的 样式 。 通 过 将 animation-fill-mode 设置 为 forwards、 
mo backwards 和 both， 将 元 素 最 终 状态 设置 为 动画 的 起 始 或 结束 状态 


【 例 7-24】 “实例 文件 :ch7\7.24.html) animation 动画 效果 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title></title> 

<style> 

*{margin:0;padding:0;} 

div{ width:100px; height:100px; border:1lpx solid #000; position:relative; animation:change 5s;} 
@keyframes change{ 

0%{ background-color:red;left:0;top:0; } 

25%{ background-color:green;left:200px;top:0; } 
S50%{ background-color:blue;left:200px;top:200px; } 
75%{ background-color:pink;left:0;top:200px; } 
100%{ background-color:purple;left:0;top:0; } 

} 

</style> 

</head> 

<body> 

<div></div> 
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</body> 

</html> 

相关 的 代码 实例 可 参考 Chap7.24.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-37 所 示 。 
EE 。- 
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7.5 响应 式 页 面 设计 


A 


刚 病 











图 7-37 动画 效果 


响应 式 页 面 设计 ， 最 近 几 年 在 前 端 开 发 中 非常 火热 ， 很 受 前 端 开发 人 员 的 追捧 。 响 应 式 页 面 设计 就 是 


















































一 套 网 页 代码 能 够 兼容 各 种 各 样 不 同 分 辨 率 大 小 的 设备 ， 为 不 同 设备 的 使 用 用 户 提供 更 加 舒适 的 界面 和 更 
好 的 体验 。 可 以 说 响应 式 的 布局 是 大 势 所 趋 ， 现 在 越 来 越 多 的 网 站 开始 采用 响应 式 的 布局 方案 。 
回 
点 7.5.1 PC 端 常用 页 面 布局 模式 
在 过 去 几 年 ， 两 栏 和 三 栏 布局 是 当时 最 火 的 网 页 布局 方式 ， 如 图 7-38 所 示 。 两 栏 和 三 栏 布局 ， 一 般 只 























能 在 PC 端 使 用 ， 在 移动 端 ， 





于 屏幕 尺寸 有 限 ， 很 难 做 到 类 似 的 操作 。 




















自 适应 中 间 栏 














图 7-38 ”两 栏 和 三 栏 布局 


手机 屏幕 。PC 端 称霸 的 时 代 已 经 过 去 ， 现 在 要 求 的 
们 需要 来 了 解 新 的 知识 。 
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随 着 智能 设备 的 普及 ， 手 机 占用 了 人 们 越 来 越 多 的 时 间 ， 对 于 


前 端 工程 师 来 说 ， 还 需要 去 适 配 不 同 的 





套 html 代码 适 配 两 种 不 同 宽度 的 屏幕 ， 





网 页 都 是 需要 能 够 去 适 配 PC 端 和 移动 端的 。 所 以 ， 我 


如 图 7-39 所 示 , 算是 基础 的 响应 式 实例 了 。 而 要 想 实 


第 项 章 使 用 CSS 3 设计 移动 页 面 样式 

















现 这 样 的 布局 关键 是 媒体 查询 (media queries) 的 使 用 ， 即 针对 不 同 设备 设置 不 同 的 CSS 文件 。 


Sox 
































7-39 布局 转换 


7.5.2 从 media 到 media queries 


在 CSS 2 中 就 已 经 介绍 了 @media， 针 对 不 同 的 媒体 类 型 定制 不 同 的 样式 规则 。 它 支持 很 多 媒体 类 型 ， 
如 表 7-14 所 示 。 








表 7-14 媒体 类 型 
类 型 描述 
all 所 有 设备 
braille 盲文 
embossed 盲文 打印 
handheld 手持 设备 
print 普通 打印 机 
projection 投影 仪 
screen 屏幕 
speech 语音 合成 器 
tty 固定 字母 间距 的 网 格 媒 体 ， 比 如 电 传 打字 机 
tv 电视 

















CSS 3 的 media queries 不 仅 继承 了 @media 的 所 有 功能 ， 还 扩展 了 @media 的 应 用 范围 ， 使 其 既 能 识别 
媒体 类 型 ， 也 能 识别 媒体 特征 ， 如 屏幕 宽度 、 像 素 比 和 设备 色彩 等 参数 。 

多 媒体 查询 由 多 种 媒体 组 成 ,可 以 包含 一 个 或 多 个 表达 式 ， 其 根据 条 件 是 否 成 立 返回 true 或 false, true 
是 执行 表达 式 里 的 CSS 样式 ， 语 法 如 下 : 

emedia 媒体 类 型 and (表达 式 ) {css 样式 } - 

media queries 的 语法 很 好 理解 , emedia 关键 字 后 面 跟 一 个 媒体 类 型 ,然后 再 跟 一 个 或 多 个 媒体 识别 的 表达 式 ,每 个 条 件 用 
and 连接 . 


媒体 类 型 的 引用 方法 ， 常 见 的 有 CSS 3 新 增 的 @media 和 link 标签 等 方法 。 
1. @media 方法 
直接 写 入 CSS 代码 中 
























































o 


151 





f° N 
HTML 5 从 入 门 到 项 目 实 中 (起 信 版 ) 


@media only screen and (min-device-width:375px)and (-webkit-min-device-pixel-ratio:2) { 





代码 如 下 : 


<link rel="stylesheet" type="text/css" href="style.css" media="all and (min -width:375px)and 


// 针 对 大 多 数 iPhone6 的 标准 模式 } 

2. link 标签 方法 

通过 link 标签 中 的 media 属性 来 指定 不 同 的 媒体 类 型 。 
ew /> 

媒体 类 型 还 支持 not 和 only 关键 字 ， 它 们 可 以 用 




















not 关键 词 表示 对 后 面 的 表达 式 执行 取 反 操 作 。 





























<link rel="stylesheet" type="text/css" href="style.css" media=" 


href="style.css"/> 








除了 上 面 一 种 样式 应 用 于 同一 类 型 的 媒体 类 型 外 ， 我 们 还 可 以 使 用 











于 不 同 的 媒体 类 型 和 媒体 特 


<link rel="stylesheet" type="text/css" 


(min-width:960px)" href=" 


性 中 ， 指 定 方式 如 下 : 


style.css"/> 





的 浏览 器 。only 很 多 时 候 是 用 来 对 
如 下 : 
only print and (max-width:1080px)" 


来 更 方便 地 指定 某 个 媒体 设备 。 

代码 如 下 : 

emedia not print and (max-width:1080px) {样式 } 

上 面 代码 表示 样式 代码 将 被 使 用 在 除 打 印 设备 条 
only 用 来 指定 某 种 特定 的 媒体 类 型 ， 可 以 用 来 所 

那些 不 支持 media queries 但 却 支持 media type 的 设备 隐藏 样式 的 。 代 码 


设备 宽度 小 于 1080px 的 所 有 设备 中 。 
除 不 支持 媒体 查询 
































多 条 表达 语句 来 将 同一 个 样式 应 




















media="handheld and (max-width:768px), screen and 


上 面 代码 中 style.css 样式 被 用 在 宽度 小 于 或 等 于 768px 的 手持 设备 上 ， 或 者 被 用 于 屏幕 宽度 大 于 或 等 


于 960px 的 设备 上 。 





media queries 支持 的 可 供 查询 的 media 属性 如 表 7-15 所 示 。 


表 7-15 可 供 查询 的 media 属性 














属 性 | 描 述 |[ Mnmvax | 什 
color 每 种 色彩 的 字 节 数 yes 整数 
color-index 设备 颜色 索引 表 中 的 颜色 yes 整数 
device-aspect-ratio 宽 高 比例 yes 整数 /整数 
device-height 设备 屏幕 的 输出 高 度 yes length 
device-width 设备 屏幕 的 输出 宽度 yes length 
grid 输出 的 设备 是 网 格 还 是 位 图 设备 no 整数 
height 泻 染 界面 的 高 度 yes length 
width 泻 染 界面 的 宽度 yes length 
monochrome 单 色 帧 缓冲 器 中 每 像素 字 节 yes 整数 
Tesolution 分 辨 率 yes 分 辨 率 (dpi/dppx) 
scan ty 媒体 类 型 的 扫描 方式 no Progressive、interlace 
orientation 横 屏 或 竖 屏 no Portrait、 landscape 





media queries 在 JavaScript 中 也 可 以 使 用 。window.matchMedia 方法 接受 一 
串 作 为 参数 ， 返 回 一 个 MediaQueryList 对 象 ， 然 后 可 以 访问 它 的 matches 
还 是 false。MediaQueryList 对 象 有 两 个 方法 ， 用 来 监听 事件 : 
调 函 数 。 下 面 就 来 调用 




















果 mediaQuery 查询 结果 发 和 4 
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上 变化， 就 调用 指定 的 回 








addListener 














个 media queries 语句 的 字符 


属性 查看 媒体 查询 的 结构 是 true 
方法 和 removeListener 方法 ， 妇 











window.matchMedia 方法 检测 屏 
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【 例 7-25】 〈 实 例文 件 : ch7\7.25.html) 检测 屏幕 的 状态 。 代 码 如 下 : 
<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0, 
maximum-scale=1.0" > 

<title>Title</title> 

<style> 

body{ background:lawngreen; } 

</style> 

</head> 

<body> 

<script> 

// 调 用 一 下 window.matchMedia 方法 ,得 到 MediaQueryList 对 象 
Var mql=window.matchMedia(' (orientation:portrait)'); 
console.log (mql); 

function handleOrientationChange (mql) { 

if (mql.matches) { 

console.1o0g(' 竖 屏 '); 

}else { 

console.1og(' 横 屏 '); } 


} 

// 输出 当前 屏幕 模式 

handleOrientationChange (mql) 7 

// 监 听 屏 幕 模式 变化 

mql.addListener (handleOrientationChange); 
</script> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.25.html 文件 ， 在 Chrome 浏览 器 中 运行 的 结果 如 图 7-40 所 示 。 
当 单 击 图 7-40 中 的 粉色 按钮 ， 会 出 现 如 图 7-41 所 示 的 效果 ， 屏 幕 已 变 为 横 屏 。 











加 Tu。 x Te x 
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图 7-40 ”屏幕 状态 为 竖 屏 图 7-41 屏幕 状态 为 模 屏 


7.5.3 响应 式 栅 格 系统 


在 7.2 节 已 经 介绍 过 栅 格 系统 ， 和 许多 同类 工具 /素材 一 样 ,“ 系 统 ” 二 字 让 它 看 起 来 无 比 高 大 上 ， 而 实 
际 上 大 多 数 栅 格 系统 都 只 是 由 一 系列 纵横 交错 的 细 线 构成 。 它 之 所 以 被 冠 以 “系统 ”二 字 ， 主 要 是 因为 这 
些 线条 涉及 了 内 容 管 理 方式 、 梳 理 页 面 结构 的 功能 。 栅 格 系统 的 运用 会 促使 网 页 内 容 逐 步 走向 规则 化 ， 实 
现 一 致 性 的 设计 。 响 应 式 栅 格 系统 ， 关 键 在 于 响应 哪些 设备 ， 根 据 需要 兼容 的 设备 特性 来 设 定 一 个 宽度 断 
点 ， 基 于 宽度 断 点 来 构建 media queries 的 代码 。 
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【 例 7-26】 〈 实 例文 件 : ch7\7.26.html) 响应 栅 格 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title> 响 应 式 栅 格 系统 </title> 

<link rel="stylesheet" href="style.css"> 
</head> 

<body> 

<div class="box"> 

<div class="row rowl">header</div> 
<div class="row"> 





<div oll">left</div> 

<div ol12">main</div> 

<div class="col3">right</div> 
</div> 

<div class="row rowl">footer</div> 
</div> 

</body> 

</html> 


CSS 文 件 (style.css): 

*{ margin:0; padding:0; } 

-box{ margin-top:15px;color:white;} 

.row{ width:100%;font-size:25px;} 

.rowl{ background:dodgerblue; font-size:30px;} 
.row:after{ clear:left; display:table; content:"";} 
class^='col'] {float:left;height:50px; text-align:center; line-height:50px;} 
.Coll{width:30%;} 

0%2} 

0%2} 

@media (min-width:1080px){ 

row { width:1180px;} 

class^='col']{ float:left; background:red;} 








} 
@media (min-width:768px) and (max-width:1080px){ 
-row{ width:960px;} 

class^='col']{ float:left; background:yellow;} 
” 
@media (max-width:768px){ 

row{ width:724px; } 

class^='col']{ float:left; background:blue;} 


: 

@media (max-width:560px){ 

.row{ width:480px; } 

class^='col']{ clear:both; background:green;width:100%;} 








相关 的 代码 实例 可 参考 Chap7.26.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 7-42 所 示 。 





图 7-42 ”响应 栅 格 
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7.5.4 移动 优先 理念 


多 年 来 ，“ 移 动 优先 ”的 设计 理念 已 经 深 深 烙 印 在 了 我 们 的 脑海 中 。 移 动 优先 理念 与 信息 化 是 分 不 开 “ 
的 ， 特 别 是 移动 的 信息 化 ， 随 着 使 用 者 及 用 户 的 增多 ， 一 些 PC 端 也 逐步 形成 规模 化 ， 网 站 的 页 面 也 形成 
较 大 的 需求 量 ， 所 以 一 些 网 站 的 建设 者 ， 需 要 考虑 的 则 是 用 户 是 否 有 一 些 相关 的 需求 ， 用 户 通过 移动 设备 
浏览 网 站 获取 信息 成 为 主要 的 途径 ， 移 动 端 网 页 设计 也 就 成 为 优先 考虑 的 设计 方向 。 

但 如 果 你 认为 “移动 优先 ”是 未 来 发 展 的 大 趋势 ， 那 你 就 错 了 。 最 近 几 年 ， 几 乎 所 有 成 功 的 移动 驱动 
型 企业 ， 都 开始 纷纷 转向 为 大 屏幕 构建 Web 应 用 程序 。 为 什么 呢 ? 

多 数 人 工作 的 大 部 分 时 间 都 面 对 着 一 块 巨大 的 显示 设备 , 或 者 说 无 论 是 笔记 本 计算 机 还 是 桌面 显示 器 ， 
一 块 大 屏幕 主导 工作 的 习惯 不 大 可 能 会 改变 。 

虽然 使 用 移动 设备 的 频率 远 高 于 桌面 设备 ， 但 无 法 确定 这 种 状况 有 多 普及 。 对 许多 人 来 说 ， 能 够 明确 
的 是 ， 移 动 设备 的 屏幕 是 他 们 大 多 情况 下 的 主要 屏幕 ， 但 无 法 确定 这 是 他 们 唯一 的 屏幕 。 能 够 明确 的 是 我 
们 的 生活 被 各 类 屏幕 充满 ， 但 无 法 确定 所 有 的 屏幕 都 是 手机 屏幕 。 随 着 这 些 颠 覆 性 移动 业务 的 成 熟 ， 企 业 
认识 到 除了 小 屏幕 之 外 ， 他 们 还 需要 为 用 户 的 大 屏 体验 服务 ， 这 种 需求 远 比 预想 得 频繁 。 

移动 端 屏幕 依旧 是 最 重要 和 最 主要 的 渠道 ， 但 已 经 不 是 唯一 的 渠道 了 。 所 以 ， 找 出 用 户 的 行为 模式 ， 
发 现 最 优 的 应 用 场景 ， 用 产品 体验 感染 用 户 ， 才 是 未 来 设计 的 发 展 大 势 。 


7.5.5 其 他 细节 


针对 移动 设备 开发 ， 还 有 许多 细节 值得 前 端 工程 师 注意 ， 特 别 是 Android 和 iPhone 这 样 的 触 屏 手 机 。 

下 面 来 详细 谈 一 谈 移动 开发 里 em 和 rem 的 用 法 和 区 别 ， 具 体 如 下 : 

。 em 和 rem 都 是 相对 单位 ， 是 相对 于 font-size 来 说 的 。 我 们 使 用 它们 的 目的 就 是 为 了 适应 各 种 手机 
屏幕 。 

。 em: 网 上 有 资料 说 是 关于 父 元素 的 , 其实 em 的 大 小 是 根据 自身 的 font-size 确定 的 , 而 只 是 正常 的 情 
况 下 子 元 素 继承 了 父 元 素 的 font-size。 

。 rem: 是 指 根 元 素 的 大 小 , 比如 根 元 素 大 小 是 16px( 浏 览 器 默认 font-size), 那么 lrem 的 大 小 就 是 16px。 

【 例 7-27】 《实例 文件 ，ch7\7.27.html) em 和 rem 的 理解 。 代 码 如 下 : 


<!DOCTYPE html> 

<html] lang="en"> 
<head> 

<meta charset="UTF-8"> 
<title></title> 
<style> 
*{margin:0;padding:0;} 
html{ 

font-size:100px’; 






















































































» 

-divi{ 
margin-left:150px; 
font-size:20px; 

3 
p{margin-top:80px} 
-div2{ 

width:1lem; 
height:1lem; 
font-size:50px; 
background:yellow; 
由 

-div3{ 

width:1lrem; 
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height:1rem; 
background:blue; 
font-size:20px; 

color:white; 

于 

</style> 

</head> 

<body> 

<xdiv class='divl'> 
<p>lem</p> 

<div class='div2'>div2</div> 
<p>lrem</p> 

<div class='div3'>div3</div> 
</div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap7.27.html 文件 ， 在 正 浏览 
中 运行 的 结果 如 图 7-43 所 示 。 
可 以 看 到 ，div 2 中 的 width 和 height 的 值 为 50px， 而 不 是 
根据 父 元 素 div 1 的 font-size=20px, 这 样 我 们 就 可 以 得 到 结论 ， 
em 的 值 是 根据 自己 来 设 定 的 ， 准 确 的 说 是 自己 的 font-size 的 
值 ， 由 此 可 见 ，em 是 相对 于 父 元 素 的 值 的 说 法 是 错误 的 。 
div 3 的 width 和 height 的 值 为 100px，rem 根据 的 是 html 
的 font-size=100px， 并 没有 继承 自己 的 font-size=20px， 这 样 开 
发 起 来 就 有 一 个 相对 的 值 了 。 这 样 做 的 意义 在 于 ， 我 们 可 以 根 
据 不 同 页 面 的 width 来 设置 不 同 的 font-size 值 ， 以 实现 移动 端 
的 适 配 问题 。 
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Verocahortes34 D> @ | 国 locaihont 
文件 (站 沂 名 昌吉 看 MV] 收 若 夫 (A) 工 琶 (T) 帮助 (H) 








lem 


div2 


lrem 
div3 


由 100%6 > 


图 7-43 em 和 rem 


7.6 “就业 面试 技巧 与 解析 


7.6.1 面试 技巧 与 解析 (一) 
面试 官 : 什么 是 响应 式 布局 ? 











应 聘 者 : 我 认为 ， 响 应 式 布局 是 根据 用 户 使 用 设备 的 屏幕 尺寸 、 系 统 平台 、 屏 幕 定向 等 进行 适应 调整 











的 布局 。 


7.6.2 ”面试 技巧 与 解析 (二 ) 
面试 官 : CSS 3 都 有 哪些 新 属性 ? 请 问 你 都 知道 哪些 ? 





应 聘 者 : 圆 角 (border-radius)、 阴 影 (box-shadow )、 文 字 效果 (text-shadow )、 线 性 渐变 (gradient) 


和 旋转 (transform )。 
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第 2 篇 
核心 技术 


在 了 解 HTML 5、CSS 3 等 知识 后 ， 本 篇 将 介绍 Web App 页 面 布局 、JavaScript 编程 语言 、jQuery 及 
AngularJS 框架 。 通过 本 章 的 学 习 , 相信 读者 的 前 端 技术 将 会 有 很 大 提高 , 并 且 为 后 面 章节 的 学 习 打下 基础 。 


第 8 章 设计 Web App 页 面 布局 

第 9 章 原生 JavaScript 交互 功能 开发 
第 10 章 jQuery 经 典 交互 特效 开发 
第 11 章 ”AngularJs 框架 








第 8 章 
设计 Web App 页 面 布局 


> 学 习 指引 


现在 的 大 部 分 人 基本 上 都 是 用 手机 去 浏览 信息 、 上 网 购物 等 ， 所 以 ， 作 为 一 个 Web 前 端 工程 师 ， 怎 么 
能 不 知道 Web App 页 面 布 局 ? 本 章 主要 介绍 移动 端 页 面 设计 规范 ， 页 面 视图 ， 基 于 iScroll 的 多 视图 布局 ， 
等 比 缩放 布局 ，viewport/meta、remy/vw 的 使 用 ，flexbox 详解 ， 以 及 特别 样式 处 理 等 。 


”重点 导读 


"熟悉 移动 端 页 面 设计 规范 。 
"熟悉 页 面 视图 。 

。 了 解 基于 iScroll 的 多 视图 布局 。 
“掌握 等 比 缩放 布局 。 

。 熟 悉 viewport/meta 标签 。 

。 掌 握 rem/vw 的 使 用 。 

熟悉 移动 Web 特别 样式 处 理 。 


8.1 移动 端 页 面 设计 规范 


移动 端 页 面 设计 灵活 多 变 ， 如 何 设计 一 个 好 的 应 用 ， 没 有 具体 的 规范 。 但 是 为 了 让 一 些 新 手 设 计 师 少 
走 弯路 ， 此 处 介绍 一 些 设计 原则 ， 以 供 新 手 设计 师 做 参考 和 指导 之 用 。 各 大 公司 在 移动 设计 累积 的 经 验 ， 
可 以 通过 各 个 移动 平台 提供 的 设计 来 总 结 ， 下 面 是 总 结 各 大 移动 公司 的 七 条 设计 规范 。 
内 容 优先 设计 : 界面 布局 应 以 内 容 为 核心 ， 展 示 用 户 期 望 看 到 的 内 容 。 
触摸 设计 :界面 的 交互 系统 以 自然 手势 为 基础 建构 ， 符 合 人 体 工学 并 保持 一 致 性 。 
为 中 断 设 计 : 考虑 应 用 的 使 用 情境 ， 确 保 在 各 个 产 出 中 断 的 情境 下 ， 让 用 户 恢复 之 前 的 操作 。 
转换 输入 方式 : 使 用 各 种 手机 的 设备 特性 和 设计 手段 ， 减 少 在 应 用 内 的 文字 输入 。 
流畅 性 设计 : 保持 应 用 交互 的 手指 及 手势 的 操作 流畅 性 和 用 户 的 注意 力 及 界面 反馈 转 场 的 流畅 性 。 
多 通道 设计 :发 挥 设备 的 多 通道 特性 、 协 同 的 多 通道 界面 和 交互 ， 让 用 户 更 有 真实 感 。 



















































































第 贺 章 设计 Web App 页 面 布局 








。 易学 性 设计 : 保持 界面 架构 简单 、 明 了， 导航 设计 清晰 易 理 解 ， 操 作 简 单 可 见 ， 通 过 界面 元 素 的 表 
意 的 和 界面 提供 的 线索 就 能 让 用 户 清楚 地 了 解 其 操作 方式 。 





























8.2 页 面 视 图 


视图 是 单 页 应 用 开发 中 最 常见 的 模块 , 通常 在 一 个 单 页 应 用 中 会 有 多 ER 
个 视图 存在 , 每 一 个 视图 都 可 以 处 理 一 部 分 业务 功能 ， 所 有 视图 的 功能 集 COioenosea4zonyal- | + 
就 是 单 页 应 用 所 能 处 理 业 务 的 最 大 能 力 。 下 面 介绍 几 种 单 页 应 用 中 最 常 出 
现 的 视图 。 本 节 用 到 了 后 面 章节 要 学 习 的 JavaScript 相关 内 容 ， 看 不 懂 的 
可 以 参考 后 面 章节 的 内 容 。 


8.2.1 单 页 面 图 层 布局 


单 视图 最 基本 的 一 种 布局 方式 为 三 段 式 结构 布局 方式 ,如 图 8-1 所 示 。 
单 视图 并 不 一 定 都 有 头 部 或 底部 ， 另 外 多 数 应 用 中 会 有 导航 条 , 但 一 
般 情况 下 导航 条 会 被 作为 头 部 或 底部 的 一 部 分 ， 不 会 独立 存在 。 


8.2.2” 侧 边栏 页 面 布局 


侧 边 栏 是 一 种 特殊 的 视图 ， 在 不 显示 时 , 会 被 隐藏 在 当前 视图 之 下 或 图 8-1 单 视图 一 一 三 段 式 
者 隐藏 到 当前 视图 之 外 ， 当 侧 边 栏 被 激活 时 ， 它 会 显示 并 覆盖 当前 视图 。 结构 布局 方式 
下 面 就 来 做 一 个 简单 的 实例 。 

【 例 8-1】《 实 例文 件 ，ch08\Chap8.1.html》 侧 边栏 页 面 布 局 实例 。 代 码 如 下 : 


<!doctype html> 

<html lang="en"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title> 侧 边栏 </title> 

<style type="text/css"> 

p{ margin-top:400px; } 

spant{ 

color:white; 

width:80px; 

height:300px; 

font-size:70px; 

background:rgb(138,43,226); 

position:absolute; 

right:-80px; 

top:400px;} 

html,body,div{ width:100%; height:100%;text-align:center;font-size:150px;} 

divl{ width:100%; height:20%;background:rgba(0,255,255,0.5);border:lpx solid red;} 
div2{ width:100%; height:60%;background:rgba(255,255,0,0.5);border:lpx solid red;} 
.div3{ width:100%; height:20%;background:rgba(255,0,255,0.5);border:lpx solid red;} 
#div4af{ 

width:980px; 

height:60%; 

background:rgba (255, 48, 48,0.9); 

position:absolute; 

left:-980px; 
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}</style> 
</head> 
<body> 
<div class="div"> 
<xdiv class="div1"> 头 部 </div> 
<div class="div2"> 内 容 </div> 
<div class="div3"> 底 部 </div> 
</div> 
<div id="div4"> 
<p> 侧 边栏 </p> 
<span> 侧 边栏 </span> 
</div> 
<script> 
window.onload=function(){ 
var div=document .getElementById('div4'); 
div.onmouseover=function(){ 
move (0, 20) ;// 第 一 个 参数 为 div 的 left 属性 的 目标 值 ,第 二 个 为 每 次 移动 多 少 像素 
}; 
div.onmouseout=function(){ 
move(-980, -20); 
] 
Var timer=null; 
function move (target, speed){ 
clearInterval (timer); 
timer=setInterval (function (){ 
if(div.offsetLeft==target){ 
clearIinterval (timer); 
J}else{ 
div.style.left=div.offsetLeft+speed+'px';} 
},20)} 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap8.1.html 文件 , 在 Chrome 浏览 器 切换 设备 工具 栏 里 运行 的 结果 如 图 8-2 所 
示 。 当 单 击 左 侧 “ 侧 边栏 ”按钮 时 ， 激 活 侧 边栏 ， 效 果 如 图 8-3 所 示 。 
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头 部 














8-2” 侧 边栏 激活 前 图 8-3” 侧 边栏 激活 后 
8.2.3 封面 图 页 面 布局 


封面 








齐 

















与 侧 边栏 类 似 。 封 面 图 一 般 会 在 页 面 初始 化 时 出 现 ， 随 后 消失 ， 之 后 就 不 再 出 现 。 下 面 我 们 通 
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过 








个 简单 的 例子 来 演示 一 下 封面 图 的 效果 。 
【 例 8-2】〈 实 例文 件 ， ch0g8\Chap8.2.html) 封面 图 


<!doctype html> 

<html lang="en"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title> 封 面 图 页 面 布局 </title> 

<style type="text/css"> 

p{ margin-top:800px;} 

html,body,div,#div4{ width:100%;height:100%;text-align:center;font-size:150px;} 
divl{ width:100%;height:20%;background:rgba(0,255,255,0.5);border:lpx solid red;} 
.div2{ width:100%;height:60%;background:rgba(255,255,0,0.5);border:lpx solid red;} 
.div3{ width:100%;height:20%;background:rgba(255,0,255,0.5);border:1lpx solid red;} 
#div4af{ 

background:rgba (255, 48, 48,0.8); 

position:absolute; 

left:0; top:0; 

} 

</style> 

</head> 

<body> 

<div class="div"> 

<div class="divl"> 头 部 </div> 

<div class="div2"> 内 容 </div> 

<div class="div3"> 底 部 </div> 

</div> 

<div id="div4"> 

<p> 封 面 图 </p> 

</div> 

<script src="jquery-1.11.1.min.js"></script> 

<script> 

$('#div4') .animate ({"height":0},2000, function () { 

$('#div4') .slideUp() 

}) 7 

</script> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap8.2.html 文件 , 在 Chrome 浏览 器 切换 设备 工具 栏 里 运行 的 结果 如 
示 。 页 面 初始 化 后 ，2s 内 逐渐 消失 ， 效 果 如 图 8-5 所 示 。 

















页 面 布局 实例 。 代 码 如 下 : 





NA 
© © ochos 














图 8-4 页面 初始 化 前 


图 8-5 页 面 初始 化 后 





网 











设计 Web App 页 面 布局 
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对 于 视图 页 面 布局 , 通常 是 将 视图 的 定位 设置 为 position:absolute， 页 面 可 视 区 域 只 能 有 一 个 视图 页 面 ， 
其 他 视图 都 是 隐藏 的 。 
【 例 8-3】 实例 文件 ，ch08\Chap8.3.html)》 多 视图 页 面 布 局 实例 。 代 码 如 下 : 


相关 的 代码 实例 可 参考 Chap8.3.html 文件 , 在 Chrome 浏览 器 切换 设备 工具 栏 里 运行 的 效果 如 图 8-6 所 
示 。 当 单 击 右 下 角 箭 头 ， 视 图 页 面 二 就 会 消失 ， 视 图 页 面 一 出 现 ， 效 果 如 图 8-7 所 示 。 
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iScroll 是 一 个 高 性 能 、 
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8-6 视图 页 面 二 
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8-7 ”视图 页 面 一 


Bements Console 为 











8.3 ”基于 iscroll 的 多 视图 布局 





资源 占用 少 、 


iScroll 有 以 下 两 个 特点 。 





无 依赖 、 多 平台 的 JavaScript 滚动 插件 。 


。 体积 小 : 提高 代码 的 运行 效率 ， 提 高 开发 人 员 的 开发 效率 。 
。 应 用 范围 广 : 不 仅 可 以 在 PC 项 目 中 使 用 ， 也 可 以 在 移动 项 目 中 使 用 。 











iScroll 


iScroll， 项 目 便 # 











不 仅 是 滚动 ， 它 可 以 处 理 任何 需要 与 














iScroll 的 最 简洁 结构 ， 其 代码 如 下 : 


<div id="wrapper"> 


<ul> 
<1i>.. 
<1i>.. 


</ul> 
</div> 


在 上 





H 











户 进行 移动 交互 的 元 素 。 在 项 目 中 仪 包含 4KB 大 小 的 
有 了 滚动 、 缩 放 、 平 移 、 无 限 滚动 、 视 差 滚 动 、 旋 转 功能 。 














.</1i> 
a</11i> 
的 代码 中 ， 想 要 则 元素 滚动 ， 必 须 将 iScroll 应 用 


第 一 个 子 元 素 滚动 ， 对 其 他 的 子 元 素 没 有 作用 。 
最 基本 的 脚本 初始 化 的 方式 如 下 : 


<script type="text/javascript"> 
Var myScroll=new IScroll('#wrapper'); 


</script> 
如 果 你 有 一 个 复杂 的 DOM 结构 ， 最 好 在 onload 

















间隙 再 去 初始 化 iScroll。 
配置 iScroll: 在 iScroll 初始 化 阶段 可 以 通过 构造 函数 的 第 二 个 参数 配置 它 。 代 码 如 下 : 


Var myScroll=new IScroll('#wrapper', { 
mouseWheel:true, 
scrollbars:true 


]}) > 


到 滚动 区 域 的 父 容器 中 ， 并 且 只 有 父 容器 中 的 


事件 之 后 适当 延迟 ， 如 给 浏览 器 100 或 者 200 毫秒 的 
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8.3.1 iScroll 页 面 结构 下 的 侧 边 栏 


使 用 iScroll 来 实现 侧 边栏 很 简单 ， 引 入 icroll 库 ， 只 需要 初始 化 并 配置 iScroll 即 可 。 
【 例 8-4】〔 实 例文 件 ，ch08\Chap8.4.html》iScroll 页 面 结构 下 的 侧 边栏 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<htm]l lang="en"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum- 
scale=1.0, maximum-scale=1.0"> 

<title>iScroll 侧 边 栏 </title> 

<script type="text/javascript" src="iscroll.js"></script> 

<script type="text/javascript"> 

window.onload=function(){ 

Var myScroll=new iScroll('wrapper',{ 

snap:true, 

momentum:false, 

hscrollbar:false 

Ds 

下 

</script> 

<style> 

*{margin:0;padding:0;} 

#wrapper{ 

width:200px; height:100%; 

position:relative; 

z-index:999; 

margin-top:100px; 

} 





























.box{width:400px;height:100%;} 
.box ul{list-style:none;} 

.box li{ float:left; color:white;} 
.1il{background:#9932CC ;width:200px; 
height:300px;font-size:30px;text-align:center; line-height:300px;} 
-1i2{ 

background:#9932CC7 
width:30px;height:100px;font-size:24px; 
} 

-div{ 

text-align:center; 

font-size:50px; 

width:100%; 

height:100%; 

background:#00FF007 
position:absolute; 

top:0; 

} 

</style> 

</head> 

<body> 

<div id="wrapper"> 

<div class="box"> 

<ul> 

<li class="]1i1"> 侧 边栏 内 容 </1i> 

<li class="1i2"> 侧 边栏 </1i> 

</ul> 

</div> 

</div> 

<div class="div"> 主 页 </div> 
</body> 

</html> 
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相关 的 代码 实例 可 参考 Chap8.4.html 文件 ， 在 Firefox 浏览 器 切换 设备 工具 栏 里 运行 的 结果 如 图 8-8 所 
示 。 当 用 鼠标 向 左 拖 动 侧 边 栏 时 ， 侧 边栏 隐藏 到 页 面 左 侧 ， 效 果 如 图 8-9 所 示 。 



































侧 边栏 内 容 




















图 8-8 ”运行 侧 边栏 效果 图 8-9 侧 边 栏 隐藏 效果 


8.3.2 iScroll 页 面 结构 下 的 封面 图 


iScroll 页 面 结构 下 的 封面 图 实现 方式 与 页 面 视图 下 的 封面 图 相似 ， 只 是 在 封面 图 消失 后 ， 为 正文 引入 
了 iscroll。 
【 例 8-5】 〈 实 例文 件 ，ch08\Chap8.5.html) iScroll 页 面 结构 下 的 封面 图 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>iScroll 封面 图 </title> 

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="js/iscroll.js"></script> 

<script type="text/javascript"> 

window.onload=function(){ 
































Var myScroll=new iScroll('wrapper'); 

// 绑 定 touchstart 事件 , 当 手 指 单 击 屏幕 时 触发 . 
$(document) .on('touchstart',function(){ 
$('.divil') .hide();}) 

} 

</script> 

<style> 

*{margin:0;padding:0;} 

body,html{ height:100%;} 
body{display:-webkit-box; -webkit-box-orient:vertical;} 
-divlf 

width:100%;height:100%; 
position:absolute; 

left:0;top:0; 

background:#32CD32; 

z-index:999; 


font-size:50px; 
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相关 的 代码 实例 可 参考 Chap8.5 html 文件 ， 在 Firefox 浏览 器 切换 设备 工具 栏 里 运行 的 结果 如 图 8-10、 图 
8-11 所 示 。 











图 8-10 ”页 面 加 载 效果 1 图 8-11 页 面 加 载 效果 2 
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8.3.3 iScroll 对 内 容 刷 新 的 支持 


回 
iScroll 实现 上 拉 或 下 拉 刷 新 ， 项 目 中 通常 是 利用 ajax 去 请 求 数据 ， 然 后 刷新 页 面 。 下 面 我 们 就 做 一 个 
简单 的 动态 为 上 拉 或 下 拉 添 加 内 容 的 例子 。 
【 例 8-6】 实例 文件 ，ch08\Chap8.6.html》iScroll 对 内 容 刷 新 的 支持 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 






































<head> 
<meta http-equiv="Content-TYPe” content="text/html; charset=utf-8"> 
<title> 滚 动 刷新 </title> 





<script type="text/javascript" src= 
<script type="text/javascript" src= 
<script type="text/javascript"> 
window.onload=function(){ 

Var myScroll=new iScroll('wrapper'); 

// 绑 定 touchend 事件 , 当 手指 从 屏幕 上 离开 的 时 候 触发 - 
$(document) .on('touchend',function(){ 
if (myScroll.y>100){ 

$5('ul1') .prepend ('<1i> 下 拉 刷 新 </1i>'); 

// 滚 动 区 间 的 刷新 重 给 

myScroll.refresh() 

3 

if (myScroll.y<myScroll.maxScrollY-100){ 
$('ul') .append('<1li> 上 拉 刷 新 </1i>'); 
myScroll.refresh() 

} 

}) 

} 

</script> 

<style> 

*{margin:0;padding:0;} 

body,html {height:100%;} 

bodyt{ 

display:-webkit-box; 
-webkit-box-orient:vertical; 

} 

header, footer{ 

font-size:30px; 

height:60px; 

text-align:center; 

line-height:60px; 

background:gold; 

} 

section{ 

-webkit-box-flex:1; 

overflow:hidden; 

text-align:center; 

} 

1i{ 

list-style:none; 
background:springgreen; 

height:100px; 

border:1px solid red; 
line-height:100px; 

’ 

</style> 

</head> 

<body> 

<header>header</header> 

<section id="wrapper"> 


jquery-1.11.1.min.js"></script> 
iscroll.js"></script> 
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<ul> 

<1i>iScroll 滚动 刷新 </1i> 
<1i>iScroll 滚动 刷新 </1i> 
<1i>iScroll 滚动 刷新 </1i> 
<1i>iScroll 滚动 刷新 </1i> 
<1i>iScroll 滚动 刷新 </1i> 
<1li>iScrol1 滚动 刷新 </1i> 
<1i>iScroll 滚动 刷新 </1i> 












































</ul> 
</section> 
<footer>footer</footer> 
</body> 
</html> 
相关 的 代码 实例 可 参考 Chap8.6.html 文件 ， 在 Firefox 浏览 器 切换 设备 工具 栏 里 运行 的 结果 如 图 8-12 
所 示 。 当 下 拉 页 面 时 ， 页 面 刷新 ， 如 图 8-13 所 示 ; 当 上 拉 页 面 时 ， 页 面 刷新 如 图 8-14 所 示 。 
@ | oonor 加 立业 为 三 CC Okann ~“ 回 和 灶 » 三 CDbamoas 收回 各 出 为 三 
i | header 让 . 
Serol 深 动 出 新 TIM 
一 一 一 = = 二 全 下 CN 
AScrol 深 动 刚 新 iScrolt ROR 
| son 出 新 
Sao seco RAN 
Eee En Serol 深 动 刚 新 
seroliR WT sa 
Eee Eee | MT 
footer 有 footer 1 footer ! 
图 8-12 页面 加 载 效果 图 8-13 下拉 刷新 效果 图 8-14 上 拉 刷 新 效果 


8.4 等 比 缩放 布局 


等 比 缩放 布局 有 流 式 布局 、rem 布局 和 vw 布局 。 其 中 rem 和 vw 布局 会 在 8.6 节 仔细 讲解 ， 本 节 要 介绍 
流 式 布局 。 流 式 布局 的 结构 特点 是 宽度 百分比 、 高 度 固定 。 可 以 说 ， 流 式 布局 是 宽度 等 比 缩放 布局 。 

流 式 布局 中 一 些小 icon 图 标 和 字体 的 大 小 等 一 般 是 固定 的 ， 插 入 图 片 默认 设置 宽度 100%， 让 其 保持 
等 比例 缩放 ， 一 般 不 写 死 。 


【 例 8-7】“〈 实 例文 件 : ch08\Chap8.7.html) 等 比 缩放 布局 实例 。 代 码 如 下 : 


<!doctype html> 

<html] lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title> 流 式 布局 </title> 

<meta name="viewport" 

content="width=device-width, initial-scale=]1,minimum-scale=1,maximum-scale=]1,user-scalable=no"/> 
<style> 

*{margin:0; padding:0;} 

html, body{width:100%;background:yellow;} 
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.divl{width:50%;height:300px;background:red;} 
.div2{width:50%;height:150px;background:white;} 
</style> 

</head> 

<body> 

<div class="div1"> 

<div class="div2"></div> 

</div> 

</body> 

</html> 


相关 的 代码 实例 可 参考 Chap8.7.html 文件 ， 在 Chrome 浏览 器 切换 设备 工具 栏 里 运行 的 结果 如 图 8-15 
所 示 。 切 换 横 屏 时 ， 页 面 显示 效果 如 图 8-16 所 示 。 


© - oO x 
国庆 3* 电 x 
C [Diocanost63342/， @& 则 安 | 3 




















phone S/T/8 ™ 




















© 一 口 X 
国 闪避 
GC |@ localhost.63342/anli/laji/3htm.,. Q@ 
Phone 67/3™ x ov 
RR Hemems conscle。 » 1 民生 | Hements Consdle Sourres 为 x 
pmbeoy BEY 3 Fn 003 rE 
图 8-15 ” 竖 屏 效果 8-16 ” 横 屏 效果 


运用 流 式 布局 时 都 是 通过 百分比 来 定义 宽度 ， 但 是 高 度 大 都 固定 ， 所 以 在 大 屏幕 的 手机 下 显示 效果 会 
变 成 有 些 页 面 元 素 宽度 被 拉 得 很 长 ， 但 是 高 度 还 是 和 原来 一 样 ， 实 际 显示 非常 不 协调 ， 这 就 是 流 式 布局 的 
致命 缺点 ， 往 往 只 有 一 部 分 尺寸 的 手机 下 看 到 的 效果 是 令 人 满意 的 ， 大 屏幕 手机 下 看 到 的 效果 相当 于 是 被 
横向 拉 长 ， 看 起 来 怪 怪 的 。 因 此 ， 流 式 布局 一 般 运 用 在 偏向 于 文字 展示 ， 且 对 整个 页 面 比例 要 求 不 高 的 页 


面 中 。 
现在 常用 的 是 流 式 布局 结合 rem 的 方式 , 使 用 rem 设置 高 度 ,使 用 百分比 设置 宽度 ， 以 实现 宽 高 自 适应 。 








8.5 ” viewport/meta 标签 





Viewport 是 专 为 手机 浏览 器 设计 的 一 个 meta 标签 ， 也 就 是 通常 所 说 的 视 口 。 

视 口 的 含义 是 浏览 器 窗口 的 可 视 区 域 。 在 屏幕 不 那么 宽 的 移动 设备 大 量 出 现 后 ， 如 果 移 动 端 设 备 使 

视 口 的 宽度 和 浏览 器 窗口 宽度 一 样 ， 那 么 将 会 导致 很 糟糕 的 结果 。 如 果 针 对 大 屏 桌 面 结构 来 设计 页 面 布局 ， 

这 样 的 页 面 在 小 屏幕 的 移动 端 设 备 上 会 缩放 得 非常 小 ， 也 许 会 导致 大 部 分 数据 重 又 覆盖， 也 可 能 导致 数据 

遮挡 无 法 全 部 显示 。 
移动 设备 浏览 器 有 3 种 视 口 : 可 见 视 口 (visual viewport)、 布 局 视 口 〈layout viewport) 和 理想 视 口 

(ideal viewport)。 通 过 对 这 3 种 视 口 的 交互 使 用 ， 使 得 移动 端 浏览 器 即便 在 小 屏幕 下 页 面 也 可 以 展示 得 很 
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NE 














好 。 可 见 视 口 、 理 想 视 口 含义 一 样 ， 布 局 视 口 是 移 动 浏览 器 设备 为 了 解决 早期 的 页 面 在 手机 上 显示 的 问题 ， 
而 虚拟 出 的 一 个 视 口 ， 决 定 了 桌面 版 网 站 的 CSS 在 应 用 时 所 设置 的 最 大 宽度 。 大 多 数 的 移动 浏览 器 都 将 布 
局 视 口 设置 为 980px， 这 样 PC 上 的 网 页 基本 能 在 手机 上 呈现 ， 只 不 过 元 素 看 上 去 很 小 ， 一 般 默认 可 以 通过 
手动 缩放 网 页 。 

只 有 浏览 器 还 不 够 , 越 来 越 多 的 网 站 都 会 为 移动 设备 单独 设计 一 个 能 与 其 完美 适 配 的 viewport。 完美 
适 配 指 的 是 ， 首 先 ， 不 需要 用 户 缩放 和 横向 滚动 条 就 能 正常 查看 网 站 的 所 有 内 容 ， 其 次 ， 显 示 的 文字 大 小 
合适 ， 不 会 因为 在 一 个 高 密度 像素 的 屏幕 里 显示 得 太 小 而 无 法 看 清 ， 理 想 的 情况 是 文字 以 及 图 片 无 论 在 何 
种 密度 屏幕 、 何 种 分 辩 率 下 ， 显 示 出 来 的 大 小 都 差不多 。 要 达到 以 上 两 点 要 求 ， 就 要 使 用 理想 视 口 。 

移动 设备 默认 的 viewport 是 布局 视 口 ， 但 在 进行 移动 设备 网 站 的 开发 时 ， 需 要 的 是 理想 视 口 。 在 开发 
移动 设备 的 网 站 时 ， 最 常见 的 就 是 把 下 面 这 行 代码 复制 到 head 标签 中 : 


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable 
=0"> 


上 面 meta 标签 的 作用 是 让 当前 viewport 的 宽度 等 于 设备 的 宽度 ,这 个 应 该 是 大 家 都 想 要 的 效果 ， 如 果 
不 这 样 设 定 ， 也 可 以 使 用 布局 视 口 ， 页 面 会 出 现 横向 滚动 条 ， 如 此 加 上 上 面 代码 就 得 到 了 理想 视 口 。 其 他 
一 些 属性 下 面具 体 进行 介绍 。 

viewport 元 标签 其 他 属性 的 详细 介绍 如 表 8-1 所 示 。 


表 8-1 viewport 元 标签 其 他 属性 


DT | 取 什 












































































































































width 定义 视 口 的 宽度 ， 单 位 为 像素 正 整 数 或 device-width 
height 定义 视 口 的 高 度 ， 单 位 为 像素 ， 一 般 不 用 正 整 数 或 device-height 


initial-scale 定义 初始 缩放 值 [0 -10.0] 
minimum-scale 定义 缩小 最 小 比例 ， 它 必须 小 于 或 等 于 maximum-scale 设置 | [0-10.0] 
maximum-scale 定义 放大 最 大 比例 ， 它 必须 大 于 或 等 于 minimum-scale 设置 [0-10.0] 
user-scalable 定义 是 否 允许 用 户 手动 缩放 页 面 yes/no， 默 认 值 yes 

下 面 来 看 一 个 简单 的 例子 ， 效 果 是 在 Chrome 浏览 器 切换 设备 工具 栏 里 运行 调试 ， 模 拟 屏 幕 是 ipad 768px x 

1024px。 

【 例 8-8】“ 实 例文 件 ，ch08\Chap8.8.html》viewport 和 meta 实例 。 代 码 如 下 : 

<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8" name="viewport" content="width=768px" > 

<title>Title</title> 

<style> 

hl{ font-size:15px; font-weight:bold;} 

p{ font-size:15px;} 

</style> 

</head> 

<body> 

<div> 

<h1l> 静 夜 思 </hl> 

<p> 窗 前 明月 光 , </p> 

<P> 疑 是 地 上 霜 .</P> 

<p> 举 头 望 明月 ,</p> 

<p> 低 头 思 故 乡 .</p> 

</div> 

</body> 

</html> 
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相关 的 代码 实例 可 参考 Chap8.8.html 文件 ， 在 Chrome 浏览 器 切换 设备 工具 栏 里 运行 的 结果 如 图 8-17 
所 示 。 切 换 横 屏 时 ， 页 面 显 示 效 果 如 图 8-18 所 示 。 


Wav EEC 
































静夜 思 
二 前 明月 光 
哆 时 地 上 各 
举 头 户 明月 er 
低头 思 故 乡 
静夜 思 
窗 前 明月 光 ， 
疑 是 地 上 霜 。 
举 头 望 明月 ， 
低头 思 故 乡 。 
图 8-17 坚 屏 效果 图 8-18 横 屏 效果 


从 图 8-18 可 以 看 到 文字 会 随 着 屏幕 的 变化 而 变化 ， 如 果 希 望 文字 的 大 小 不 受 viewport 的 影响 ， 可 以 将 
content="width=768px" 中 的 width 设置 成 device-width， 其 代码 如 下 : 

<meta charset="UTF-8" name="viewport" content="width=device-width" > 

运行 后 的 效果 如 图 8-19、 图 8-20 所 示 。 

还 可 以 设置 initial-scale 的 值 来 使 页 面 刚 开始 泻 染 时 就 放大 ， 其 代码 如 下 : 

<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=5" > 


运行 后 的 效果 如 图 8-21 所 示 。 




















前 认 思 
窗 前 明月 光 ， 静夜 思 
疑 是 地 上 霜 。 静夜 思 网 本 
举 头 望 明月 ， 窗 前 明月 光 ， 窗 前 明月 光 ， 
人 疑 是 地 上 条， 疑 是 地 上 霜 。 
i 举 头 望 明月 ， 
低头 恩 故乡 。 
低头 思 故 乡 。 
图 8-19 坚 屏 效果 图 8-20 横 屏 效果 图 8-21 设置 initial-scale 为 5 时 的 效果 











一 般 网 站 都 不 需要 用 户 去 缩放 就 能 正常 浏览 ， 可 以 通过 设置 maximum-scale 属性 ， 其 代码 如 下 : 
<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,maximum-— 
scale=1.0" > 
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8.6 ”rem/vw 的 使 用 


在 HIML 5 时 代 ， 响 应 式 页 面 设计 已 经 成 为 前 端 开发 的 潮流 ， 像 开源 的 框架 Bootstrap 响应 式 设计 ， 就 
是 一 个 典型 的 媒体 查询 方式 ， 它 设 定 了 某 些 媒体 查询 节点 ， 根 据 不 同 设备 宽度 ， 设 置 不 同 的 断 点 位 置 来 做 
响应 式 查询 ， 代 码 如 下 : 
@media screen and (min-width:980px) { 
font-size:20px; 
a screen and (max-width:960px) and (min-width:560px) { 
font-size:18px; 
LS Screen and (max-width:560px) { 
font-size:16PX7 
可 以 看 出 ，3 种 不 同 的 页 面 尺 寸 范围 分 别 应 用 了 3 种 不 同 的 字体 大 小 来 适应 页 面 布局 ， 编 写 起 来 很 烦 
琐 ， 需 要 根据 不 同 的 页 面 尺 寸 ， 来 分 别 设置 CSS 样式 。 


8.6.1 使 用 rem 响应 设计 


在 PC 端 页 面 开发 中 ,可 以 使 用 媒体 查询 , 通常 可 以 很 好 地 满足 需要 , 但 是 在 页 面 分 辩 率 错综复杂 的 移 
动 端 ， 媒 体 查询 就 显得 捉襟见肘 了 。 在 Web App 快速 发 展 的 时 代 ，rem 进入 了 大 家 的 视线 ， 且 随 着 浏览 器 
对 CSS 3 新 特性 的 进一步 支持 ，rem 目前 已 被 很 多 企业 广泛 使 用 。 代 码 如 下 : 

html{ 

Ee /* 设 置 根 元 素 的 字体 大 小 */ 

} 

div{ 

font-size:2rem;/* 字 体 大 小 就 是 80px*/ 

width:5rem; /* 宽 度 就 是 200px*/ 

height:5rem; /* 高 度 就 是 200px*/ 

2 

在 字体 和 布局 单位 上 面 使 用 rem 作为 单位 , 字体 大 小 和 布局 单位 的 值 就 会 和 根 节点 也 就 是 HTML 标签 
的 font-size 成 比例 ， 这 样 整个 页 面 都 会 根据 根 元 素 的 font-size 属性 来 调整 。 正 是 基于 这 个 原因 ， 我 们 可 以 
在 每 一 个 设备 下 根据 设备 的 宽度 设置 对 应 的 font-size， 从 而 实现 自 适应 布局 。 这 样 就 有 两 种 方法 来 实现 响 
应 布局 ， 一 种 是 rem 和 媒体 查询 结合 ， 利 用 媒体 查询 的 断 点 范围 ， 设 置 对 应 的 font-size; 另 一 种 是 利用 
JavaScript 来 动态 获取 屏幕 的 宽度 尺寸 。 

【 例 8-9】〔 实 例文 件 ，ch08\Chap8.9.html》rem 和 媒体 查询 实例 。 代 码 如 下 : 

<!doctype html> 

<html lang="en"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<meta id="eqMobileViewport" name="viewport" content="width=320, initial-scale=1, maximum-scale=1, 
user-scalable=no"> 

<title>rem 和 媒体 查询 </title> 

<style> 

div{ font-size:2rem; } 

@media screen and (min-width:800px) { 

html {font-size:80px;} 

a screen and (max-width:800px) and (min-width:600px){ 

html{font-size:50px;} 
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} 
@media screen and (max-width:600px) { 
html {font-size:20px;} 


} 

</style> 

</head> 

<body> 

<div> 你 好 rem</div> 
</body> 

</html> 














相关 的 代码 实例 可 参考 Chap8.10.html 文件 ， 在 Chrome 浏览 器 切换 设备 工具 栏 里 运行 的 结果 如 图 8-22 











所 示 。 切 换 设备 的 不 同类 型 ， 可 以 看 到 HTML 中 的 font-size 属性 值 ， 会 随 着 设备 屏幕 的 大 小 而 改变 ， 如 图 





8-23、 图 8-24 所 示 。 
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8-23 ”iPad 设备 页 面 


加 remix 和 司 x 
CC | © localhost:63342/anli/laji/S.html? ijt=apali8s0n40bm56kcoepi8132d 会 | : 





iphoneX™ 











你 好 rem 








图 8-24 iPoneX 设备 页 面 














上 面 是 媒体 查询 和 rem 结合 ， 分 别 在 iPadPro 1024 X1366、iPad 768 X1024 和 iPhoneX 375 x 812 这 三 


类 设备 下 运行 的 效果 。 可 以 看 出 ， 当 “你 好 rem” 满 足 相应 的 媒体 查询 断 点 范围 时 ， 则 应 用 相 
font-size 属性 来 调整 整个 页 面 。 








应 根 元 素 的 





可 以 看 出 ，rem 和 媒体 查询 的 结合 依然 不 能 做 到 等 比例 响应 ， 只 是 在 两 个 媒体 查询 断 点 范 











目 切 换 时 ， 








根据 设置 的 font-size 值 来 做 出 响应 。 
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下 面 使 用 JavaScript 动态 获取 设备 的 尺寸 。320px 宽度 设备 font-size 值 是 20px, 此 处 就 以 320px 宽度 的 
设备 作为 参照 ， 来 调整 不 同 尺寸 设备 的 font-size 值 。 
【 例 8-10】〔 实 例文 件 ，ch08\Chap8.10.html)》 动 态 获取 不 同 设备 尺寸 的 font-size 属性 实例 。 代 码 如 下 : 


<!doctype html> 
<html lang="en"> 

















<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta id="eqMobileViewport" name="viewport™ content="width=320, initial-scale=1, 


maximum-scale=1, user-scalable=no"> 
<title>rem </title> 
<style> 
div{ font-size:2rem; } 
</style> 
</head> 
<body> 
<div> 你 好 rem</div> 
</body> 
</html> 
<script> 
// 动 态 获取 不 同 设备 的 font-size 值 
(function (doc, win) { 
Var docEl=doc.documentElement, 
resizeEvt='orientationchange' in window ?'orientationchange':'resize', 
recalc=function () { 
Var clientWidth=docEl.clientWidth; 
if (!clientWidth) return; 
docE1.style.fontSize=20 * (clientWidth/320) + 'px'; 
和 
if (!doc.addEventListener) return; 
win.addEventListener (resizeEvt, recalc, false); 
doc.addEventListener ('DOMContentLoaded', recalc, false); 
}) (document, window); 
</script> 


相关 的 代码 实例 可 参考 Chap8.10.html 文 件 , 在 Chrome 浏览 器 切换 设备 工具 栏 里 运行 的 结果 如 图 8-25 所 示 。 
切换 设备 的 不 同类 型 ， 可 以 看 到 HTML 5 中 的 font-size 属性 值 会 随 着 设备 尺寸 的 改变 而 改变 ， 如 图 8-26、 图 
8-27 所 示 。 
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图 8-27 切换 设备 后 页 面 效果 2 


174 


第 图章 设计 Web App 页 面 布局 





可 以 看 出 ，rem 配合 JavaScript 成 功 地 达到 了 预期 效果 ， 页 面 可 以 等 比例 响应 ， 基 本 可 以 适应 大 部 分 的 


布局 了 。 


8.6.2 VW 视窗 宽度 百分比 
vw 是 CSS 3 新 增 的 值 类 型 ， 相 对 


视窗 的 宽度 ，1lvw 等 于 视窗 宽 








册 是 相对 于 视窗 的 高 度 


及 ， 





度 的 1%。 同 时 新 增 的 还 有 vh 和 vm， 








vm 是 相对 于 视窗 的 高 度 或 宽度 ， 取 决 于 





F 哪 个 更 小 。 


【 例 8-11】 实例 文件 ，ch08\Chap8.11.html)》vw 实例 。 代 码 如 下 : 


<!doctype html> 
<html lang="en"> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta id="eqMobileViewport" name="viewport" content="width=320, initial-scale=],maximum-scale=1, 


user-scalable=no"> 
<title>vw</title> 
<style> 
div{width:30vw; 
height:30vh; 
background:red; 
1 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap8.11.html 文件 ， 在 Chrome 浏览 器 切换 设备 工具 栏 里 运行 的 结果 如 图 8-28 


和 图 8-29 所 示 。 


国 w 
CC | © localhost:63 


342/anli/laji/’ 


iphone 6/7/.. 50% 四 


民 各 


body 


为 


Elements Console Sources 


html 








图 8-28 页面 加 载 效 果 1 














轩 w ye 
CG | © localhost:63342/anli/laj/5 刁 位 
iphone 6/7/8 ™ x So%v 
[R | Hements Console Sources » 莹 
hm 上 7 
图 8-29 页 面 加 载 效果 2 
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看 起 来 和 页 面 百分比 布局 很 像 ， 其 实 不 然 , 页 面 百 分 比 布局 是 相对 于 父 元 素 设 定 比率 ,而 vw (viewport 
width) 和 vh 〈viewportheight) 是 相对 于 视窗 的 大 小 ，100vw 等 于 视窗 宽度 ，100vh 等 于 视窗 高 度 ， 用 vw、 
如 设 定 的 大 小 只 和 视窗 大 小 有 关 。 

rem 相 比 较 于 vw， 被 支持 得 比较 早 ， 在 当时 移动 端 Web App 开发 需求 旺盛 的 情况 下 ，rem 脱颖而出 ， 
成 为 一 个 弹性 布局 效果 很 好 的 方案 。vw 不 仅 被 支持 得 比较 晚 ， 而 且 还 有 大 多 数 低 版 本 浏览 器 不 兼容 。 目 前 
状况 ， 对 vw 最 不 利 的 是 Android Browser，ndroid Browser 4.4 以 下 的 用 户 是 不 兼容 的 。 

从 上 面 的 例子 中 能 看 出 ,vw 还 是 有 很 多 优势 的 , 直接 根据 视 口 大 小 去 适 配 ,不 需要 像 rzem 要 用 JavaScript 
去 动态 获取 屏幕 宽度 来 调整 根 元 素 的 font-size。 相 信 随 着 Web App 开发 的 不 断 发 展 ,vw 可 能 成 为 未 来 开发 
的 主流 力量 之 一 。 

































































8.7 ”移动 Web 特别 样式 处 理 


1. Reset 
因为 浏览 器 的 种 类 很 多 ,每 个 浏览 器 的 默认 样式 也 是 不 同 的 ，reset.css 则 是 用 来 重 置 默认 的 、 浏 览 器 自 
带 的 一 些 样式 ， 目 的 是 保持 各 种 终端 显示 一 致 ， 如 图 8-30 所 示 ， 以 下 是 常用 的 reset.css。 


re | 

















加 


1 
box-sising: border-box; 


body, hl, h2, h3, h4, h5, hé, hr, p, pre, dl, dt, dd, ul, ol, li, th, td, form, fieldset, legend, button, input, 
textaren, figure, figcaption, nav, footer, menu, blockquote { 
margin: 0; 
padding: 0 
j 
hl, h2, h3, h4, h5, hé 【 
1 font-size: L100%; 
1 font-weight: normali 
1 ] 
14 address, em, i, b { 
font-style: normal; 


a, a:hover, a:active, a:visited [ 
mn color: #576B95; 
text-decoration; none 


1 
1 ) 
1 
1 


) 
1 ul, ol, 1i{ 
list-style: none 


) 





8-30 ”reset.css 样式 


下 面 是 移动 开发 中 用 到 的 一 部 分 reset.css。 

(1) 有 时 候 为 了 布局 方便 会 重 置 盒子 模型 : 

{box-sizing:border-box;} 

(2) 禁止 iOS 和 Android 用 户 选中 文字 : 

{-webkit-user-select:none;} 

(3) 禁止 iOS 长 按时 触发 系统 的 菜单 ， 禁 止 iOS 和 Android 长 按时 下 载 图 片 : 
{-webkit-touch-callout:none} 


(4) 重 置 Webkit 内 核 浏览 器 表单 输入 框 Placeholder 的 样式 : 
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input::-webkit-input-placeholder{color:#000000;} 
input:focus::-webkit-input-placeholder{color:#eeeeee;} 


reset.css 还 有 很 多 ， 这 里 就 不 解释 了 。 其 实 ，reset.css 文件 可 以 根据 项 目 需 求 的 不 同 而 进行 自 定义 。 
2. 高 清 图 片 
乔布斯 曾经 这 样 阐述 retina 屏幕 : “ 当 你 所 拿 的 东西 距离 你 10~12 英寸 (25 一 30 厘米 ) 时 ， 它 的 分 辨 


率 只 要 达到 300ppi 这 个 “神奇 数字 (每 英寸 300 像素 点 ) 以 上 ， 你 的 视网膜 就 无 法 分 辨 出 像素 点 了 。?” 














一 张 普 通 图 片 在 非 Retina 屏幕 上 显示 正常 ， 而 在 retina 屏幕 上 显示 模糊 ， 为 什么 会 出 现 这 种 情况 呢 ? 























这 是 因为 ， 在 Retina 屏幕 ， 由 于 像素 比 (devicePixeRatio) 是 2， 一 个 物理 像素 等 于 两 个 CSS 像素 ， 图 片 将 

















放大 两 倍 ， 此 时 就 造成 了 图 片 在 设置 中 显示 时 被 拉 伸 ， 呈 现 出 来 的 时 候 就 模糊 不 清 。 比 如 ， 屏 幕 上 一 张 图 












































片 为 100pxx 100px， 那 我 们 在 移动 设备 上 就 应 该 以 100px X 100px 去 泻 染 。 但 是 ,在 retina 屏幕 ,由 于 DPR 
等 于 2 时 ， 实 际 上 是 以 200px x 200px 去 泻 染 的 ， 图 片 因此 被 拉 什 而 变 得 模糊 。 


























width: (w_value/dpr)px; 
height: (h_value/dpr)px; 


在 retina 屏幕 下 ，100px x 100px 的 图 片 ， 我 们 只 需要 50px x 50px 去 泻 染 就 可 以 了 。 





3. 1px border 
CSS 中 的 像素 只 是 一 个 抽象 的 单位 ， 在 不 同 的 设备 或 环境 中 ，CSS 中 的 1px 所 代表 的 设备 物理 像素 是 











不 同 的 。 后 来 随 着 技术 的 发 展 ， 移 动 设备 的 屏幕 像素 密度 越 来 越 高 ， 从 iPhone 4 开始 ， 苹 果 公 司 便 推出 了 
Retina 屏幕 ， 分 辩 率 提高 了 一 倍 ， 但 屏幕 尺寸 却 没 变 化 ， 这 就 意味 着 同样 大 小 的 屏幕 上 ， 像 素 却 多 了 一 倍 ， 
这 时 , 一 个 CSS 像素 等 于 两 个 物理 像素 。 其 实 造成 边框 变 粗 的 原因 就 是 CSS 中 的 1px 并 不 等 于 移动 设备 的 


lpx。 








解决 边框 变 粗 方法 有 很 多 种 ,下面 我 们 就 介绍 一 种 比较 常用 的 方法 , 原理 是 把 原先 元 素 的 border 去 掉 ， 








然后 利用 :before 或 者 :after 等 伪 元 素 重 做 border， 使 用 transform 的 scaleY 属性 缩小 一 半边 框 高 度 。 











【 例 8-12】 《实例 文件 :ch08\Chap8.12.html) 1px border0 实 例 。 代 码 如 下 : 


<!doctype html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 
<title>Document</title> 

<meta name="viewport" content="width=device-width,initial-scale=],minimum-scale=],maximum-scale=], 
user-scalable=no"/> 

<style> 

.borderl:after { 

content:''; 

display:block; 

width:400px; 

height:1px; 
background-color:red; 
-webkit-transform:scaleY (0.5); 
transform: scaleY¥Y (0.5); 


.border2{margin-top: 5px;} 
.border2:after { 
content:''; 
display:block; 
width:400px; 

height:1px; 
background-color:red; 


} 
</style> 


</head> 
<body> 
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~ 


<xdiv class="borderl">0.5px 边框 </div> 

<div class="border2">1px 边框 </div> 

</body> 

</html> 

相关 的 代码 实例 可 参考 Chap8.12.html 文件 ， 在 Chrome 浏览 器 切换 设备 工具 栏 里 运行 的 效果 如 图 8-31 
所 示 。 
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8-31 页面 显示 效果 


8.8 ”就 业 面试 技巧 与 解析 


8.8.1 ”面试 技巧 与 解析 (一) 


面试 官 : 请 简单 地 谈 一 下 rem 布局 适应 的 场景 ? 
应 聘 者 : rem 布局 是 宽度 自 适应 ,无 法 做 到 高 度 自 适应 ， 所 以 对 于 那些 对 高 度 要 求 很 高 的 应 用 程序 ,rem 
无 法 实现 。 


8.8.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : 请 问 响应 式 布 局 与 自 适应 布局 有 什么 区 别 ? 

应 聘 者 : 响应 式 与 自 适应 的 原理 是 相似 的 ， 都 是 检测 设备 ， 根 据 不 同 的 设备 采用 不 同 的 CSS， 而 且 CSS 
都 是 采用 的 百分比 ， 而 不 是 固定 的 宽度 ; 不同 点 是 响应 式 的 模板 在 不 同 的 设备 上 看 上 去 是 不 一 样 的 ， 会 随 
着 设备 的 改变 而 改变 展示 的 样式 ， 而 自 适应 不 会 ， 所 有 的 设备 看 起 来 都 是 一 套 模板 ， 不 过 是 长 度 或 者 图 片 
变 大 或 变 小 ， 不 会 根据 设备 采用 不 同 的 展示 样式 。 
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WP 学习 指 引 


如 果 你 想 把 自己 的 网 站 提升 到 更 高 水 平 ， 必 须要 有 能 力 整 合 互动 。 但 是 ， 添 加 一 些 交互 功能 需要 比 
HTML 5、CSS 3 更 强大 的 编程 语言 ， 而 JavaScript 可 以 提供 所 需 的 功能 。 只 要 对 语言 有 了 基本 的 理解 ， 您 
就 可 以 创建 一 个 页 面 ， 它 可 以 对 常见 事件 做 出 反应 ， 例 如 页 面 加载 、 和 鼠标 点 击 和 移动 ， 甚 至 键盘 输入 。 本 
章 将 向 读者 介绍 JavaScript 语言 的 基础 知识 。 


全” 重点 导读 


。 掌 握 JavaScript 基础 语法 。 
* 掌握 循环 语句 。 

。 掌握 数组 与 函数 。 

。 掌 握 String 与 Date 对 象 。 
*。 掌 握 BOM 与 DOM. 
“掌握 事件 。 
.熟悉 拖 动 效果 。 

。 掌 握 cookie 存储 。 

。 掌握 正则 表达 式 。 

。 掌 握 Ajax 技术 。 

。 了 解 面向 对 象 基础 。 


9.1 JavaScript 基础 语法 


JavaScript 是 一 个 轻 量 级 ， 但 功能 强大 的 编程 语言 。 本 节 从 基础 的 语法 开始 讲 起 ， 会 让 你 发 现 原来 编写 
程序 其 实 也 可 以 这 么 简单 。 
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如 9.1.1 字母 大 小 写 
类 似 CSS 中 id 和 class 选择 器 的 名 称 ，JavaScript 是 区 分 大 小 写 的 ， 如 下 面 代 码 ， 声 明 的 是 4 个 


变量 : 
Var ab,aB,Ab,AB; 
很 多 人 容易 把 JavaScript 和 HTML 混淆 ，HTML 是 不 区 分 大 小 写 的 ， 如 <H1></H1> 和 <h1></h1> 效 果 
和 是 一 样 的 。 


9.1.2 变量 


在 编程 语言 中 ， 变 量 用 于 存储 数据 值 ，JavaScript 使 用 关键 字 var 来 声明 变量 : 

var 变量 名 

使 用 等 号 运算 符 给 变量 赋值 : 

var a=1237 

这 样 就 声明 了 一 个 变量 a， 初 始 值 为 123。 变 量 的 命名 除了 区 分 大 小 写 以 外 ， 开 头 只 能 使 用 字母 和 “_” 
或 “$”， 不 能 以 数字 开头 ， 后 面 可 以 接 字母 、“_” 或 “$”、 数 字 。 
正确 的 命名 方式 代码 如 下 : 









































Var abc=17 
Var $ab=1; 
Var _ab=17 
错误 的 命名 方式 代码 如 下 : 
Var lab=17 
var #1ab=17 
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9.1.3 常量 


ECMAScript 之 前 并 没有 定义 声明 常量 的 方式 ,ECMAScript 标 准 中 引入 了 新 的 关键 字 const 来 定义 常量 。 
使 用 const 定义 常量 后 ， 常 量 无 法 改变 。 代 码 如 下 : 

<script> 

const a=5; 

a=67 

alert (a) 

</script> 


如 上 面 代 码 ， 在 浏览 器 中 会 报错 ， 在 Chrome 浏览 器 中 运行 结果 如 图 9-1 所 示 。 











© PUncaught TypeError: Assignment to constant variable. 
at 5.html? ijt=tbnconev-aefvdr5dnnvj9vlo:21 








9-1 常量 


9.1.4 数据 类 型 


编程 语言 中 ， 数 据 类 型 是 一 个 非常 重要 的 内 容 。 只 有 了 解 了 数据 类 型 的 概念 ， 才 可 以 更 好 地 操作 变量 。 
JavaScript 包括 6 种 数据 类 型 。 这 6 种 数据 类 型 又 可 以 分 为 基本 数据 类 型 和 引用 数据 类 型 两 大 类 。 

其 中 , 基本 数据 类 型 包括 字符 串 (String)、 数 字 (Number)、\ 布 尔 (Boolean)、 空 (Null)、 未 定义 (Undefined ); 
引用 数据 类 型 包括 对 象 (Object)。 
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基本 数据 类 型 和 引用 数据 类 型 最 大 的 区 别 是 变量 值 存储 方式 的 不 同 ， 基 本 数据 类 型 ， 变 量 中 存储 的 是 
值 本 身 ， 引 用 数据 类 型 存储 的 是 值 在 内 存 空 间 的 地 址 ， 也 就 是 指针 。 

数据 类 型 之 间 ， 有 些 是 可 以 相互 转换 的 ， 如 字符 串 转 数字 ， 利 用 JavaScript 提供 的 函数 parseInt0 来 转换 ， 
代码 如 下 : 


console.log (parseInt ('123abc'));//123 


9.1.5 关键 字 


每 种 编程 语言 都 有 自己 规定 的 一 些 关键 字 ，JavaScript 关键 字 用 于 标识 要 执行 的 操作 。 这 些 关 键 字 不 能 
被 用 于 其 他 名 称 ， 如 变量 名 、 函 数 名 等 。 像 关键 字 var， 一 看 见 就 知道 是 声明 变量 用 的 。ECMAScript 第 五 
版 的 关键 字 如 表 9-1 所 示 。 
















































人 



























































表 9-1 JavaScript 关键 字 


关键 字 | 关键 字 | 关键 字 | 字 
break 
Typeof 
Tetum 
void 
Continue 





9.1.6 ” 转 义 字符 
在 JavaScript 中 可 以 使 用 反 和 斜 杜 “\” 来 向 文本 字符 串 添 加 转 义 字符 ， 具 体 如 表 9-2 所 示 。 












































表 9-2 转 义 字符 

转 义 字符 -4 
v 单 引号 
六 双 引 号 
\& 和 号 
¥ 换 页 符 
vb 退 格 符 
At 制 表 符 
YY 回 车 符 
un 换行 符 
\ 反 斜 杠 

9.1.7 运算 符 





JavaScript 运算 符 主 要 包括 : 算数 运算 符 、 赋 值 运算 符 、 比 较 运 算 符 、 罗 辑 运 算 符 、 字 符 串 i 
详情 如 表 9-3 一 表 9-6 所 示 。 
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We 
表 9-3 算数 运算 符 
运 算 符 说 明 Wa) 运算 结果 
十 加 1+1 六 2 
入 减 y=2-1 1 
* 乘 y=2*2 4 
除 y=6/3 y=2 
% 取 余 y=6%4 y=2 
2 
+ 自 增 运算 ++y〈 先 自 增 ， 再 运算 ) 六 3 
y++〔 先 运算 ， 再 自 增 ) 
y2 
入 自 减 运算 --y ( 先 自 减 ， 再 运算 ) 1 
y--《 先 运算 ， 再 自 减 ) 





表 9-4 赋值 运算 符 〈y=5 情况 下 ) 


















































运 算 符 例 于 等 价 于 运算 结果 
= y=5 / 5 
+ y+=1 y=y+1 y=6 
ny 和 二 2 4 
本 一 y*=2 y=y*2 =10 
上 y/=5 y=y/5 1 
%= y%=4 yy%4 1 
表 9-5 上 比较 运算 符 
运 算 符 说 明 例 :于 运算 结果 
等 于 的 
false 
-一 恒 等 于 ( 值 和 类 型 都 要 做 比较 ) ls 
false 
= 不 等 于 ， 也 可 写作 过 tme 
> 类 于 2>3 false 
< 小 于 2<3 tme 
se 大 于 等 于 2>=3 false 
< 小 于 等 于 2<=3 tme 
表 9-6 ”逻辑 运算 符 
运 算 符 说 明 例 子 运算 结果 
&& 逻辑 与 (and) X=3:y=7:x&&y>5 false 
| 逻辑 或 (or) X=3:y=7:x&&y>5 tme 
! 逻辑 非 ， 取 逻辑 的 反面 X=2:y=6:!(x>y) tme 
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字符 串 和 数字 连接 运算 符 : 两 个 数字 相 加 ， 返 回 数字 相 加 的 和 ;数字 与 字符 串 相 加 ， 返 回 字符 串 ， 其 





代码 如 下 : 
<script> 
z=1+28 
y='1'+2; 
z="'love'+520; 
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console.1og (x,y,z, typeof (x), typeof (y) , typeof (z)); 


</script> 














如 上 面 的 代码 ， 在 Chrome 浏览 器 中 运行 结果 如 图 9-2 所 示 。 





2" "love520" "number” "string” "string” 5.htel? ijt<rgfkmg26-k7hucrktcesillv7:24 





























图 9-2 ”连接 运算 符 


除了 上 面 常用 运算 符 外 ， 还 有 一 些 经 常用 到 的 运算 符 ， 如 typeof 和 new 运算 符 。 其 中 ，typeof 运算 符 





























9.1.8 注释 
JavaScript 注释 可 


于 检测 值 的 数据 类 型 ，new 运算 符 用 于 构造 一 个 新 的 对 象 实例 。 














于 提高 代码 的 可 读 性 。JavaScript 注释 不 会 执行 ， 可 以 添加 注释 来 对 JavaScript 进行 


解释 。JavaScript 注释 分 为 单行 注释 和 多 行 注释 。 单 行 注释 以 “/” 开 头 ， 只 注释 有 “/” 的 一 行 ， 多 行 注释 
以 “hp#*” 开 头 ， 以 “#/ ”结尾 ， 其 代码 如 下 : 
//JavaScript 单行 注释 
/*JavaScript 多 行 注释 
JavaScript 多 行 注释 
JavaScript 多 行 注 释 */ 


9.1.9 字面 量 


在 编程 语言 中 ， 字 


面 量 是 一 种 表示 值 的 记 法 ， 如 表 9-7 所 示 。 











表 9-7 字面 量 

类 型 例子 
EET a 
字符 串 字 面 量 "hello 或 者 "hello” 
表达 式 字面 量 i 1+1 或 者 2*2 
数组 字面 量 [a.b.c.de.fg] 
对 象 字 面 量 {name:'jack'.age:'18'.score:'90'} 
函数 字面 量 fonction fhn(a.b) {return a-b:} 








以 上 是 部 分 JavaScript 的 基本 语法 ， 还 有 控制 语句 、 数 组 和 函数 ， 将 在 9.2 和 9.3 小 节 详细 讲解 。 











9.2 ”循环 语句 

















在 用 程序 来 实现 算法 时 ， 经 常会 遇 到 重复 和 选择 的 情况 ， 这 时 就 需要 用 到 控制 语句 了 。 控 制 语句 包括 

















183 





i 


MA NNER 辣 和 ) 


选择 条 件 语句 和 循环 语句 ， 本 节 就 要 讲解 循环 语句 。 有 了 这 些 语句 的 帮助 ， 程 序 可 以 充分 发 挥 计算 机 的 运 
行 能 力 ， 编 写 强大 的 功能 程序 。 

循环 语句 的 出 现 ， 就 是 为 了 完成 重复 出 现 的 工作 ， 就 像 路 径 的 一 个 回路 ， 可 以 让 一 部 分 代码 重复 执行 。 
JavaScript 有 四 种 循环 语句 ， 分 别 为 while、do/while、for 和 forin。 























9.2.1 while 循环 
While 循环 语句 语法 如 下 : 
while (执行 的 条 件 ) 

{ 
需要 执行 的 代码 


} 
while 循环 语句 工作 流程 比较 容易 理解 ， 即 当 执行 的 条 件 满足 时 ， 就 会 重复 执行 。 其 代码 如 下 ; 


<script> 











Var a=07 二 口 X 
while(a<5){ 园 http://localhost:6334; 
ee "write(a+'—') | 文人 坊 坟 (二 看 V) 收 训 夫 (” 
} 0-1-2-3-4- 
</script> 
在 下 浏览 器 中 运行 结果 如 图 9-3 所 示 ee 
DU 之 全 5 ~o 
ee 人 9-3 ”while 循环 


要 
.> do/while 循环 


do/while 循环 语句 语法 如 下 : 
do 


需要 执行 的 代码 
} 
while (执行 的 条 件 ); 
do/while 循环 是 while 循环 的 变 体 。 与 while 循环 不 同 的 是 ，do/while 循环 会 在 检查 条 件 是 否 满足 之 前 
就 执行 一 次 代码 ， 如 果 条 件 仍然 满足 ， 就 会 重复 执行 。 其 代码 如 下 : 


Var a=57 
dof 

document .write (a) 国 x 
SA 国 hapyWlocalhost6334 器 


文件 编 强 (E) 查看 V) 收藏 去 ( ” 


时 
while (a<5) 7 
在 正 浏 览 器 中 运行 结果 如 图 9-4 所 示 。 


可 以 发 现 ，a<5， 这 个 条 件 不 满足 运行 条 件 ， 但 是 在 执行 代码 前 会 OS 
执行 一 次 。 图 9-4 do/while 循环 


5 




















切 9.2.3 for 循环 


for 循环 语句 语法 如 下 : 
for ( 语 旬 1; 语句 2; 语 名 3) { 


需要 执行 的 代码 
时 
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看 上 去 for 循环 很 复杂 ， 出 现 了 3 条 语句 ， 但 其 实 理解 了 这 3 条 语句 就 会 发 现 ， 它 和 while、do/while 
都 是 差不多 的 。 语 句 1 是 在 for 循环 之 前 执行 初始 化 的 ; 语句 2 是 一 个 逻辑 表达 式 ， 和 while 循环 里 的 执行 条 
件 一 样 ， 每 循环 一 次 会 检测 满 不 满 足 ， 满 足 继续 循环 ， 语 句 3 是 用 来 改 
变 循环 条 件 的 。 其 代码 如 下 : 

<script> 


forl(var i=0;i<6;i++){ 
document .write (i+'—"); 

















} 
</script> 


在 正 浏览 器 中 运行 结果 如 图 9-5 所 示 。 9-5 for 循环 








9.2.4 fowin 循环 


for/in 循环 语句 语法 如 下 : 
for (var 变量 in object)1{ 


执行 的 代码 
} 


for/in 循环 和 前 面 3 种 循环 不 一 样 ， 通 常情 况 下 ， 我 们 只 用 for/in 循环 作用 于 对 象 。 其 代码 如 下 : 


<script> 
Var obj={ 
name:'jack', 
age:'18°', 
Sex: 'man' 文件 (有 ” 妨 辑 (E) 。 坦 看 (V) 收藏 夫 ( ” 





} 
for (var i=0 in obj){ 
document .write (obj [i]+'<br/>') 
. 
</script> 


在 正 浏 览 器 中 运行 结果 如 图 9-6 所 示 。 9-6 fonin 循环 








9.2.5 continue 和 break 
continue 和 break 语句 是 循环 语句 中 经 常 出 现 的 ， 都 用 于 中 断 循环 流程 。break 直接 停止 整个 循环 ， 实 








例 代码 如 下 : 
<script> 
for (var i=0;i<8;i++){ 
if(i==5){ 


break; 
} 
document .write (i+'—') 
. 
</script> 


在 正 浏 览 器 中 运行 结果 如 图 9-7 所 示 。 
Continue 中 断 本 次 执行 的 循环 ， 实 例 代码 如 下 : 

















<script> 
for (var i=0;i<8;i++){ 
if (i==5){ 


continue; 
} 
document .write (i+'—') 


} 
</script> 
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在 正 浏 览 器 中 运行 结果 如 图 9-8 所 示 。 





—- 口 
hrtpi//localhost: 


文件 (月 ” 编 界 (E) 。 坦 看 (V) 收藏 夫 ( 


图 http://localhost6334; 口 


文件 (篇 问 (E) ”查看 (V) 收藏 只 ( ” 
0-1-2-3-4-6-7- 





图 9-7 break 语句 运行 结果 9-8 ”continue 语句 运行 结果 


9.3 ”数组 与 函数 


数组 和 函数 是 JavaScript 的 语法 重点 ， 学 好 它们 对 学 习 JavaScript 有 很 大 的 帮助 。 
数组 


在 JavaScript 中 ， 数 组 是 一 种 特殊 的 对 象 类 型 ， 是 使 用 单独 的 变量 名 来 存储 一 系列 的 值 。 
创建 数组 有 两 种 方法 ; 第 一 种 方法 ， 由 于 数组 是 一 个 特殊 的 对 象 类 型 ， 所 以 创建 一 个 数组 类 似 于 创建 
一 个 对 象 实例 ， 通 过 new 运算 符 和 相应 的 数组 构造 函数 来 完成 。 编 写 方法 如 下 : 

var arrl=new Rrray() 7 // 没 有 元 素 的 空 数组 

var arr=new Array(l1,'2','jock'); // 有 三 个 元 素 的 数组 

男 一 种 方法 ， 直 接 用 字面 量 定义 数组 。 编 写 方法 如 下 : 

var arr3=[]; // 没 有 元 素 的 空 数组 

Var arr4=[1, "2","jack’] // 有 三 个 元 素 的 数组 

数组 创建 完 以 后 ， 可 以 通过 下 标 〈 下 标 就 是 元 素 的 索引 ) 来 查找 各 个 元 素 。 元 素 按 顺序 排列 ， 下 标 从 

0 开始 计算 。 例 如 ， 数 组 arr 4 元 素 的 下 标 分 别 是 0、1、2， 代 码 如 下 : 

<script> 
Var arr4=[1,'2','jack'] 
document .write(arr4[0]+'-"'+arr4[1]+'-'+arr4[2]) 

</script> 

在 正 浏 览 器 中 运行 结果 如 图 9-9 所 示 。 

此 外 ， 还 可 以 通过 length 属性 计算 出 数组 的 元 素 个 数 ， 代 码 如 下 : 

<script> 
var arrA=[i> 2.7 ack’] 
document .write (arr4.length+' 个 ') 

</script> 


在 正 浏 览 器 中 运行 结果 如 图 9-10 所 示 。 
































= 口 x 






se 口 x 


localhost6334 


园 httpi//localhost5334 器 http: 
文件 (F) ” 蝙 强 (E) ”查看 (V) 收藏 夫 (” 


文件 (有 ” 蝙 辑 (E) 查看 (V) 收藏 失 (” 





图 9-9 数组 中 的 数据 图 9-10 ”数组 的 元 素 个 数 
JavaScript 数组 有 以 下 几 个 特性 : 
。 可 以 保存 任何 类 型 的 数据 ， 一 个 数组 的 数组 元 素 可 以 是 不 同类 型 的 数据 。 
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。 利用 不 存在 的 索引 查找 数组 时 ， 例 如 ，arr4[4]， 不 会 报错 ， 而 会 返回 undefined 值 。 
。 数组 的 大 小 是 动态 调整 的 , 可 以 随 着 数据 的 添加 自动 增长 。 例如 , 赋值 给 数组 一 个 不 存在 的 索引 值 ， 
程序 不 会 报错 ， 而 是 动态 扩展 数组 ， 代 码 如 下 : 


<script> 
Var arr4=[1,'2"',"'jack'] i 日 x 














arr4[5]=10; httpJllocalhost6334; D ~ 
// 把 arr4 中 的 元 素 遍 历 出 来 








for (var i=0;i<67i++) { DN 
document .write (arr4[i]+',") 1,2jack,undefined,undefined,10, 
} 
</script> 我 100% ~ 
在 正 浏 览 器 中 运行 结果 如 图 9-11 所 示 。 9-11 动态 扩展 数组 效果 


9.3.2 ”函数 


JavaScript 中 的 函数 是 指 可 以 完成 某 种 特定 功能 的 一 系列 代码 的 集合 ,在 函数 被 调用 前 函数 内 的 代码 并 
不 执行 。 

在 编写 程序 时 , 经 常会 遇 到 有 些 代码 被 反复 利用 , 真 的 需要 一 遍 一 遍地 编写 吗 ? 当然 没 必要 。 JavaScript 
中 的 函数 就 解决 了 这 样 的 问题 。 在 JavaScript 中 , 我们 把 反复 利用 的 那 段 代码 封装 成 一 个 函数 ， 在 需要 时 直 
接 调 用 该 函数 就 行 了 。 

函数 包括 内 置 函数 和 自 定义 函数 , 内 置 函数 是 JavaScript 语言 本 身 提 供 的 , 像 字符 串 转换 函数 toString0 
和 整数 转换 函数 parseInt0， 这 样 的 函数 就 是 内 置 函数 。 自 定义 函数 就 是 自己 或 者 其 他 人 编写 的 代码 集合 ， 
提供 给 他 人 用 的 函数 。 例 如 现在 流行 的 各 种 JavaSeript 开发 框架 ， 像 Bootstrap 和 jQuery， 其 中 就 有 大 量 的 
自 定义 函数 。 

JavaScript 有 3 种 定义 函数 的 方式 : 

(1) 使 用 函数 声明 定义 函数 : 


function 函数 名 (参数 1, 参数 2，.… 参 数 n) { 
语句 ; 
return 返回 值 ; 



































}; 

(2) 使 用 函数 表达 式 定义 函数 : 

var 变量 =function (参数 1, 参数 2,.… 参 数 n) { 
语句 ? 
return 返回 值 ? 














} 

(3) 使 用 function 构造 函数 定义 函数 〈 不 常用 ): 

var 变量 =new function (语句 ,return 返回 值 ; ) ; 

调用 函数 基本 方法 是 “函数 名 () ”。 

在 使 用 函数 时 ， 几 乎 都 需要 传递 参数 ， 参 数 是 函数 与 外 面 沟 通 的 桥梁 。 函 数 将 根据 不 同 的 参数 通过 相 
同 的 代码 处 理 ， 得 到 编写 者 所 要 的 结果 。 定 义 参 数 的 个 数 是 不 受 限制 的 ， 每 个 参数 之 间 用 逗号 隔 开 。 人 参数 
也 是 变量 ， 但 参数 只 能 被 函数 内 部 使 用 ， 在 函数 被 调用 时 赋值 ， 通 常 称 它们 为 形式 参数 。 

求 任意 正 整数 ， 从 0 开始 加 到 该 数 的 和 ， 其 代码 如 下 : 

<script> 

/7 和 定义 画 数 ,传递 参数 


function myfunction(n){ 
Var sum=0; 
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~ 


for(var i=0;i<nsit+) { 
sum=sumt+i; 
} 
return sumtn 
a common=myfunction (100) ;// 调 用 函数 ,参数 赋值 100, 并 把 执行 的 值 赋值 给 变量 common 

en 

在 正 浏 览 器 中 运行 结果 如 图 9-12 所 示 。 

在 函数 外 部 可 以 通过 参数 来 传递 不 同 的 数据 给 函数 ， 而 内 部 则 是 通过 返回 值 来 实现 的 ， 返 回 值 通常 使 
Tetum 语句 完成 。 如 上 面 求 任意 正 整数 和 的 例子 ， 函 数 返 回 结果 ， 并 赋值 给 变量 ， 返 回 值 可 以 是 任何 类 
型 的 数据 ， 包 括 基 本 类 型 和 引用 类 型 。 

return 语句 和 参数 一 样 ， 并 不 是 必需 的 ， 如 函数 可 以 不 传递 参数 ， 它 就 是 一 种 方法 ， 哪 里 需要 直接 调 
就 可 以 了 。 有 时 函数 内 部 只 是 想 显示 一 句 话 或 弹出 一 个 对 话 框 而 已 ， 那 就 不 需要 retum 语句 了 。 但 是 即使 
不 写 returm 语句 ， 函 数 本 身 也 会 有 返回 值 undefined。 如 上 面 求 任意 正 整 数 ， 从 0 开始 加 到 该 数 的 和 的 例子 ， 
注释 retum 语句 ， 其 代码 如 下 : 


<script> 
function myfunction(n){ 
Var sum=07 
for (var i=0;i<n;i++) { 
sum=sumt+i; 




















































































































//return sumtn 
} 
Var common=myfunction(100); 
alert (common) 
</script> 


在 下 浏览 器 中 运行 结果 如 图 9-13 所 示 。 





来 自 网 页 的 消息 X 


全 返回 值 一 undefined 














图 9-12 求 和 结果 图 9-13 ” 范 数 返回 值 





9.4 String 与 Date 


String 和 Date 是 JavaScript 的 内 置 对 象 ，String 对 象 用 于 处 理 字符 串 ，Date 对 象 用 于 处 理 日 期 。 




















9.4.1 String 对 象 


前 面 讲 过 数据 类 型 ，String 类 型 表示 字符 串 ， 是 一 个 基本 数据 类 型 ， 通 过 双 引 号 或 单 引号 来 创建 。 而 内 
置 对象 String 是 一 个 构造 函数 ， 类 型 是 function, 通过 new 操作 符 来 调用 String 构造 函数 创建 String 实例 对 
象 ， 该 实例 对 象 是 Object 类 型 的 值 ， 其 代码 如 下 : 

<script> 


// 定 义 一 个 String 基本 类 型 的 变量 
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Ex 123 7 


// 利 用 内 置 对 象 String 创建 一 个 Object 类 型 的 对 象 





























var strobject=new String('123') 来 所 网 页 的 沁 x 
alert('str 类 型 是 '+typeof (str)+'\nstrobject 类 型 是 '+typeof 四 
(strobject) ) 
</script> 全 ch 芝 型 是 string 
ep 2 strobjectsks 型 是 obj 
在 但 浏览 器 中 运行 结果 如 图 9-14 所 示 。 | 
String 对 象 的 属性 有 length、constructor 和 prototype，length 表示 
字符 串 的 长 度 ，constrctor 属性 返回 创建 该 对 象 的 函数 的 引用 ， 匡 二 到 
prototype 允许 对 象 添加 属性 和 方法 。 图 9-14 object 类 型 和 String 对 象 





String 对 象 的 方法 有 很 多 ， 如 表 9-8 所 示 。 
表 9-8 String 对 象 方法 


String 对 象 方法 说 明 












































charAtO 返回 指定 位 置 的 字符 

charCodeAtO 返回 在 指定 位 置 的 字符 的 Unicode 编码 

concat() 连接 两 个 或 更 多 字符 串 ， 并 返回 新 的 字符 串 

fromCharCodeO 将 Unicode 编码 转 为 字符 

indexOfO 返回 某 个 指定 的 字符 串 值 在 字符 串 中 首次 出 现 的 位 置 

lastIndexOf() 从 后 向 前 搜索 字符 串 ， 并 从 起 始 位 置 开始 计算 返回 字符 串 最 后 出 现 的 位 置 
matchO 查找 到 一 个 或 多 个 正则 表达 式 的 匹配 

TeplaceO 在 字符 串 中 查找 匹配 的 字符 串 ， 并 替换 与 正则 表达 式 匹 配 的 字符 串 
searchO) 查找 与 正则 表达 式 相 匹配 的 值 

slice0 提取 字符 串 的 片段 ， 并 在 新 的 字符 串 中 返回 被 提取 的 部 分 

split0 把 字符 串 分 割 为 字符 串 数组 

substrO) 从 起 始 索引 号 提取 字符 串 中 指定 数目 的 字符 

substringO 提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 

toLowerCase0) 把 字符 串 转换 为 小 写 

toUpperCase0 把 字符 串 转换 为 大 写 

valueOfO 返回 某 个 字符 串 对 象 的 原始 值 

trim0 去 除 字符 串 两 边 的 空白 





9.4.2 Date 对象 


Date 对 象 是 用 来 处 理 日 期 和 时 间 的 。 
通过 创建 Date 构造 函数 的 实例 对 象 ， 可 以 获取 计算 机 中 的 时 间 ， 其 代码 如 下 : 
<script> 

var date=new Date(); 


alert (date); 
</script> 
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在 正 浏 览 器 中 运行 结果 如 图 9-15 所 示 。 














来 全 网 页 的 消息 


F Thu Apr 05 2018 16-49-33 GMT*0800 (中 国标 准 93 间 ) 





9-15 ”获取 当前 的 时 间 


创建 Date 对 象 有 4 种 方式 ， 其 代码 如 下 : 

new Date();// 当 前 日 期 和 时 间 

new Date (milliseconds);// 返 回 从 1970 年 1 月 1 日 至 今 的 毫秒 数 

new Date (dateString);// 如 new Date(2018,5,20); 

new Date(year,month, day, hours,minutes, seconds,milliseconds); 

日 期 对 象 可 以 通过 使 用 比较 符号 进行 日 期 的 比较 ， 其 代码 如 下 : 

<script> 

var datel=new Date(); 

var date2=new Date(2000,1,1); 
var date3=new Date(2000,1,1); 
alert (datel>date2);// 结 果 为 true 
alert (date2==date3) ;// 结 果 为 false 

</script> 

虽然 可 以 用 大 于 或 小 于 来 比较 时 间 对 象 ， 但 不 能 用 等 号 来 比较 ， 因 为 该 操作 会 被 认为 是 在 比较 datel 
和 date2 变量 是 否 引 用 了 同一 个 对 象 ， 所 以 结果 永远 是 false。 

当 使 用 大 于 或 小 于 号 时 ， 系 统 内 部 会 对 这 两 个 对 象 进行 转 换 ， 通 过 转换 为 毫秒 数 进行 比较 。 这 个 毫秒 数 
是 以 UTC 时 间 的 1970 年 1 月 1 日 午夜 为 时 间 基点 算出 来 的 ，1970 年 1 月 1 日 午夜 毫秒 数 为 0， 每 天 会 增加 
24Xx60Xx60X1000 毫秒 。 而 时 间 比 较 的 依据 是 当前 时 间距 离 基点 的 毫秒 数 ， 毫 秒 数 越 大 的 表示 日 期 越 大 。 

所 以 精确 的 时 间 比 较 ， 就 是 把 要 比较 的 时 间 对 象 先 转换 为 毫秒 数 ， 然 后 再 进行 比较 。 计 算 毫 秒 数 可 以 
使 用 getTime0 或 者 valueOf0 方 法 ， 其 代码 如 下 : 


<script> 

var datel=new Date(); 

Var date2=new Date(); 

alert (datel .getTime ()==date2.getTime()) // 结 果 为 true 
</script> 


Date 对 象 的 属性 包括 constructor 和 prototype。constructor 是 返回 对 创建 此 对 象 的 Date 函数 的 引用 ; 
prototype 用 于 向 对 象 添加 属性 和 方法 。 
Date 对 象 方法 如 表 9-9 所 示 。 


















































表 9-9 Date 对 象 方法 
说 明 








Date 对 象 方法 





















getDate() 返回 Date 对 象 中 一 个 月 的 某 一 天 (1 一 31) 
getDay0 返回 Date 对 象 中 一 周 的 某 一 天 (0 一 6) 
getFullYear0 返回 Date 对 象 年 份 〈4 位 数字 ) 
getHoursO) 返回 Date 对 象 的 小 时 (0 一 23) 
getMilliseconds() 返回 Date 对 象 的 毫秒 (0~999) 





getMinutesO) 返回 Date 对 象 的 分 钟 (0 一 59) 
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续 表 

Date 对 象 方法 说 明 
getMonthO 返回 Date 对 象 月 份 (0 一 11) 
getSeconds0 返回 Date 对 象 的 秒 数 (0 一 59) 
getTime0 返回 1970 年 1 月 1 日 至 今 的 毫秒 数 
getTimezoneOffsetO 返回 本 地 时 间 与 格林 威 治标 准时 间 (GMT) 的 分 钟 差 
getUTCDate0 根据 世界 时 从 Date 对 象 返回 月 中 的 一 天 (1~31) 
getUTCDayO 根据 世界 时 从 Date 对 象 返回 周 中 的 一 天 (0 一 6) 
getUTCFullYear0 根据 世界 时 从 Date 对 象 返回 四 位 数 的 年 份 
getUTCHours0 根据 世界 时 返回 Date 对 象 的 小 时 〈0 一 23) 
getUTCMilliseconds0 根据 世界 时 返回 Date 对 象 的 毫秒 (0 一 999) 
getUTCMinutes0) 根据 世界 时 返回 Date 对 象 的 分 钟 〈0 一 59) 
getUTCMonthO 根据 世界 时 从 Date 对 象 返回 月 份 (0~1) 
getUTCSeconds0) 根据 世界 时 返回 Date 对 象 的 秒 钟 〈0 一 59) 
parseO 返回 1970 年 1 月 1 日 午夜 到 指定 日 期 字符 串 ) 的 毫秒 数 
setDate0) 设置 Date 对 象 中 月 的 某 一 天 (1 一 31) 
setFullYear0 设置 Date 对 象 中 的 年 份 (四 位 数字 ) 
setHoursO 设置 Date 对 象 中 的 小 时 (0 一 23) 
setMilliseconds() 设置 Date 对 象 中 的 毫秒 (0 一 999) 
setMinutes() 设置 Date 对 象 中 的 分 钟 (0 一 59) 
setMonthO 设置 Date 对 象 中 的 月 份 (0 一 11) 
setSeconds() 设置 Date 对 象 中 的 秒 〈0 一 59) 
setTimeO setTime() 方 法 以 毫秒 设置 Date 对 象 
setUTCDate0 根据 世界 时 设置 Date 对 象 中 月 份 的 一 天 (1 一 31) 
setUTCFullYear0) 根据 世界 时 设置 Date 对 象 中 的 年 份 ( 四 位 数字 ) 
setUTCHoursO) 根据 世界 时 设置 Date 对 象 中 的 小 时 〈0 一 23) 
setUTCMillisecondsO 根据 世界 时 设置 Date 对 象 中 的 毫秒 (0 一 999) 
setUTCMinutes() 根据 世界 时 设置 Date 对 象 中 的 分 钟 (0 一 59) 
setUTCMonthO 根据 世界 时 设置 Date 对 象 中 的 月 份 (0~11) 
SetUTCSeconds0) 根据 世界 时 设置 指定 时 间 的 秒 字段 
toDateStringO 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
toISOStringO 使 用 ISO 标准 返回 字符 串 的 日 期 格式 
toJSONO 以 JSON 数据 格式 返回 日 期 字符 串 
toLocaleDateStringO 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
toLocaleTimeStringO 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toLocaleStringO 根据 本 地 时 间 格 式 ， 把 Date 对 象 转换 为 字符 串 
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续 表 
Date 对 象 方法 说 明 
toStringO 把 Date 对 象 转换 为 字符 趾 
toTimeStringO) 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toUTCString0 根据 世界 时 ， 把 Date 对 象 转换 为 字符 串 
UTCO 根据 世界 时 返回 1970 年 1 月 1 日 到 指定 日 期 的 毫秒 数 
valueOf) 返回 Date 对 象 的 原始 值 





9.5 BOM 与 DOM 


BOM 提供 了 独立 于 内 容 而 与 浏览 器 窗口 进行 交互 的 对 象 , 描述 了 与 浏览 器 进行 交互 的 方法 ,可 以 对 浏 
览 器 窗口 进行 访问 和 操作 。DOM 描述 了 处 理 网 页 内 容 的 方法 ，DOM 把 整个 页 面 规 划 成 由 节点 层级 构成 的 
文档 。 


9.5.1 BOM 浏览 器 对 象 模型 


BOM (Browser Object Model) 即 浏览 器 对 象 模 型 。BOM 提供 了 独立 于 页 面 内 容 而 与 浏览 器 窗口 进行 
交互 的 对 象 。BOM 系列 相关 的 对 象 构 成 ， 并 且 每 个 对 象 都 提供 了 很 多 方法 与 属性 。 如 图 9-16 所 示 ， 
我 们 只 列 出 了 部 分 的 BOM 对 象 。 































































window 对 象 





9-16 BOM 对 象 


JavaScript 的 核心 就 是 通过 操作 BOM 对 象 来 控制 页 面 ， 每 个 BOM 对 象 的 属性 和 方法 都 有 一 些 是 针对 
浏览 器 的 ， 不 同 的 浏览 器 ， 可 能 会 通过 不 同 的 属性 名 来 获取 相同 的 数据 。 

1. window 对 象 

window 对 象 是 BOM 模型 中 的 顶层 对 象 ， 所 有 浏览 器 都 支持 window 对 象 ， 它 表示 浏览 器 窗口 。 只 要 
打开 一 个 浏览 器 窗口 ，window 对 象 就 存在 。 

window 对 象 就 是 JavaScript 的 全 局 对 象 , 在 使 用 window 对 象 的 属性 和 方法 时 不 需要 特别 指明 。window 
对 象 的 常用 方法 如 表 9-10 所 示 。 























表 9-10 ”window 对象 的 常用 方法 
方 目 沁 说 明 
alert0 弹出 一 个 提示 窗口 ， 包 含 一 些 信息 和 一 个 窗口 











confirmO 弹出 一 个 确认 对 话 框 
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续 表 
廊 傅 宣 法 说 明 
promptO 弹出 一 个 输入 窗口 ， 让 用 户 填写 信息 
open0 通过 程序 控制 打开 一 个 指定 URL 地 址 的 浏览 器 窗口 
close0) 关闭 一 个 打开 的 窗口 
setTimeoutO 延迟 规定 的 时 间 后 执行 某 个 函数 
setInterval() 允许 在 指定 的 时 间 间 隔 内 ， 重 复 执行 某 个 函数 
moveBy0 让 窗口 移动 指定 的 偏 移 
ImoveTo0 让 窗口 移动 到 指定 的 位 置 
resizeBy() 让 窗口 尺寸 改变 指定 的 大 小 
resizeToO 让 窗口 尺寸 改变 到 指定 的 大 小 
2. history 对 象 











history 对 象 包含 浏览 器 的 浏览 历史 , 为 了 保护 用 户 隐私 , history 对 象 不 再 允许 JavaScript 访问 已 经 访问 























过 的 实际 URL。history 对 象 提供 了 一 系列 方法 ， 人 允许 在 浏览 记录 之 间 跳 转 ， 这 些 方 法 如 表 9-11 所 示 。 


表 9-11 history 对 象 的 方法 








方 天 说 有明 
history.backO 和 在 浏览 器 中 点 击 后 退 按钮 相同 
history.forward 0 和 在 浏览 器 中 点 击 向 前 按钮 相同 
i 当 x 为 负 整数 时 ， 和 在 浏览 器 中 点 击 后 退 按钮 相同 
当 x 为 正 整数 时 ， 和 在 浏览 器 中 点 击 向 前 按钮 相同 














3. screen 对 象 
screen 对 象 包 含有 关 用 户 客户 端 显示 屏幕 的 信息 。 它 提供 了 控制 一 个 浏览 器 位 置 的 功能 ， 如 将 窗口 定 




















位 到 显示 屏 窗 口 的 正中 间 。screen 对 象 的 属性 如 表 9-12 所 示 。 











表 9-12 screen 对 象 的 属性 





属 性 说 了 明 
screen.height 显示 屏幕 当前 分 辩 率 下 的 高 度 
screen.width 显示 屏幕 当前 分 辨 率 下 的 宽度 





显示 屏幕 当前 分 辩 率 下 的 高 度 ， 指 除去 window 任务 栏 


screen.availHeight 





screen.avail Width 显示 屏幕 当前 分 辨 率 下 的 宽度 ， 指 除去 window 任务 栏 





目标 设备 或 缓冲 器 上 的 调 色 板 的 比特 深度 





colorDepth 


4. location 对 象 

location 对 象 用 于 获取 和 改变 窗口 的 URL。 
获取 URL 代码 如 下 : 
alert (location.href); 
设置 URL 代码 如 下 : 
location.href=" 自 定义 设置 的 URL" 


location 对 象 的 一 些 方法 如 表 9-13 所 示 。 
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表 9-13 location 对 象 的 方法 
六 国庆 法 说 有明 
用 传 入 的 URL 替代 当前 的 URL, 该 方法 会 将 历史 记录 中 的 URL 一 并 替换 掉 , 会 
覆盖 之 前 的 历史 记录 
用 传 入 的 URL 替代 当前 的 URL, 该 方法 会 将 历史 记录 中 的 URL 一 并 替换 掉 , 不 
会 覆盖 之 前 的 历史 记录 
重新 加 载 当 前 的 URL 用 于 刷新 





location replace(urD) 


Window-.location.assign(urD) 





window.location.reload() 


5. navigator 对 象 
navigator 对 象 包含 有 关 访 问 者 浏览 器 的 信息 。navigator 对 象 的 属性 如 表 9-14 所 示 。 


表 9-14 _ navigator 对 象 的 属性 


属 性 说 明 
navigator.userAgent 获取 操作 系统 的 版 本 、 浏 览 器 版 本 /类 型 
navigator.cookieEnabled 获取 浏览 器 是 否 支持 cookie 
navigator.platform 获取 用 户 所 使 用 的 操作 系统 类 型 
navigator.appName 获取 浏览 器 的 名 称 
navigator.appVersion 获取 浏览 器 的 平台 和 版 本 信息 


6. document 对 象 

document 对 象 是 文档 的 根 节点 ， 只 要 浏览 器 开始 载 入 HTML 文档 ， 这 个 对 象 就 开始 存在 了 。document 
对 象 使 我 们 可 以 用 JavaScript 对 HTML 页 面 中 的 元 素 进 行 访问 ,并 且 所 有 主流 浏览 器 均 支 持 document 对 象 。 
下 面 是 一 些 常 用 的 document 对 象 属性 ， 如 表 9-15 所 示 。 

















表 9-15 document 对 象 属性 











局 ”性 说 明 
document.URL 当前 文档 的 完整 URL 
document.scripts 文档 中 <script> 元 素 对 象 
document.domain 当前 文档 的 服务 器 域名 
document.body <body> 元 素 
documentinputEncoding 文档 的 编码 方式 
document.doctype 文档 的 类 型 声明 (DTD) 





9.5.2 ”DOM 文档 对 象 模型 


当 网 页 被 加 载 时 ， 浏 览 器 会 创建 页 面 的 文档 对 象 模型 DOM， 它 只 关注 浏览 器 所 载 入 的 文档 。DOM 是 
与 平台 和 语言 无 关 的 ，DOM 不 仅仅 是 用 在 JavaScript 中 ， 任 何 编程 语言 都 可 以 实现 DOM 接口 ， 来 对 文档 









































1. DOM 元 素 的 查找 
操作 HTML 元 素 ， 首 先 得 找到 该 元 素 。 查 找 元 素 的 方法 有 以 下 几 种 : 
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。 通过 标签 名 查找 HTML 元 素 。 

。 通过 id 查找 HTML 元 素 。 

。 通过 类 名 查找 HTML 元 素 。 

例如 下 面 代码 : 

document .getElementsByTagName ("标签 名 ") 


document .getElementById ("id 名 ") 
document .getElementsByClassName ("类 名 ") 














2. innerHTML 属性 

innerHTML 是 HTML 的 一 个 节点 属性 ， 通 过 它 可 以 完成 对 节点 的 创建 、 修 改 和 删除 等 操作 。 

例如 下 面 代 码 ， 就 可 以 完成 修改 或 删除 的 功能 。 

document .getElementBYId("id 名") .innerHTML=" 新 的 HTML" 或 者 null; 

3. 节点 信息 

在 DOM 中 ， 每 个 节点 都 有 一 些 用 来 描述 自身 的 属性 和 访问 节点 信息 的 方法 ， 其 中 比较 常用 的 一 些 属 
性 如 表 9-16 所 示 。 



























































表 9-16 节点 属性 和 方法 


属 性 说 明 











parentNode 当前 节点 的 父 节点 

childnodes 

previousSibling 前 一 个 兄弟 节点 

nextSibling 当前 节点 的 下 一 个 兄弟 节点 

firstChild 当前 节点 的 所 有 子 节点 的 第 一 个 

lastChild 当前 节点 的 所 有 子 节点 的 最 后 一 个 

nodeType 节点 类 型 ， 包 括 文档 节点 、 元 素 节 点 、 文 本 节点 、 属 性 节点 等 
nodeValue 节点 值 





4. 节点 的 基本 操作 
DOM 提供 了 可 以 动态 更 改 文档 结构 的 方法 ， 这 些 方法 可 以 动态 地 操作 节点 ， 如 表 9-17 所 示 。 





表 9-17 操作 节点 的 方法 

















方 法 例 子 
replaceChild 可 以 替换 当前 节点 的 某 个 子 节点 node replaceChild(newChild.oldChild) 
appendChild 用 于 将 一 个 新 节点 追加 到 当前 节点 的 最 后 node.appendChild(newChild) 
removeChile 删除 当前 节点 的 某 个 子 节点 node removeChile(Child) 
A cloneNode(Boolean)， 如 果 Boolean 为 tue， 还 会 复 
cloneNode 复制 节点 制 当前 节点 的 所 有 子 节点 
5. 创建 节点 

















使 用 document 文档 对 象 可 以 动态 地 创建 DOM 支持 的 任何 类 型 的 节点 ， 经 常 使 用 的 方法 有 以 下 几 种 ， 
如 表 9-18 所 示 。 
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表 9-18 创建 节点 的 方法 



































广汉 说 明 
document.createElement(tagName) 创建 一 个 指定 标签 名 的 节点 
document.createText(ttext) 创建 一 个 文本 节点 
document.createComment(comment) 创建 一 个 注释 节点 
document.createDocumentFragment() 创建 一 个 文档 的 片段 节点 
所 有 被 创建 出 来 的 节点 都 要 依附 于 DOM 树 中 的 某 个 节点 下 ， 可 以 使 用 appendChild0 方 法 将 一 个 新 创 
建 的 节点 插入 DOM 中 。 


9.6 事件 


事件 是 由 用 户 或 者 浏览 器 自身 执行 的 操作 ， 比 如 鼠标 的 单 击 、 拖 动 、 滚 动 等 操作 。 这 些 操作 会 被 看 成 
不 同 的 事件 。 事 件 可 以 通过 JavaScript 进行 控制 并 做 出 响应 ， 以 此 提高 页 面 与 浏览 的 交互 体验 。 


事件 对 象 


件 在 浏览 器 中 是 以 对 象 的 形式 存在 的 ， 任 何事 件 触发 ， 都 会 产生 一 个 事件 对 象 event， 该 对 象 包含 着 所 
件 有 关 的 信息 。 它 包括 导致 事件 的 元 素 、 事 件 的 类 型 和 其 他 与 特定 事件 相关 的 信息 。 例 如 下 面 的 代码 : 


<script> 
document .onclick=function (event){ 
console.log (event) 

























































， 
</script> 


在 页 面 中 单 击 饼 标 时 ， 触 发 了 单 击 事件 ， 就 产生 了 一 个 事件 对 象 event， 在 正 浏 览 器 控制 台 会 显示 该 
event 的 所 有 信息 。 在 正 浏览 器 中 运行 结果 如 图 9-17 所 示 。 

从 上 面 的 代码 中 可 以 看 出 ， 如 果 是 单 击 事件 ， 事 件 对 象 就 会 包含 单 击 的 坐标 值 的 信息 。 其 实事 件 对象 
会 根据 所 触发 的 事件 类 型 的 不 同 而 不 同 ， 如 果 是 键盘 事件 ， 事 件 对 象 就 会 包含 敲 击 的 按键 值 。 
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图 9-17 event 事件 的 信息 
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9.6.2 事件 类 型 





在 JavaScript 中 事件 可 分 为 鼠标 事件 、 键 盘 事 件 和 HTML 事件 。 


1. 鼠标 事件 
鼠标 事件 是 用 户 与 鼠标 交互 产生 的 事件 ， 一 些 常用 的 鼠标 事件 如 表 9-19 所 示 。 
































表 9-19 常用 的 鼠标 事件 














ba 





Wn 


件 如 表 9-20 所 示 。 














鼠标 事件 说 明 
onclick 鼠标 单 击 对 象 
ondblclick 鼠标 双击 对 象 
onmouseout 鼠标 从 某 对 象 移 开 
onmouseover 鼠标 移 到 某 对 象 之 上 
onmousedown 某 个 鼠标 按键 被 按 下 
onmouseup 某 个 鼠标 按键 被 松 开 
onmousemove 鼠标 被 移动 
oncontextmenu 鼠标 右键 单 击 对 象 
【 例 9-1】 (实例 文件 ，ch9\Chap9.1.html) 鼠标 事件 实例 。 代 码 如 下 : 





<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<tit1le> 鼠 标 单 击 事件 </title> 
<style> 
div{width:100px; height:100px; background:red; color:white;} 
</style> 
</head> 
<body > 
<div id="box">box</div> 
</body> 
</html> 
<script> 
Var boxl=document .getElementById('box'); 
boxl.onclick=function() {alert(' 你 点 击 了 box')} 国 htpy/localhost6334 人 ”0 | 国 外 标 点 
</script> 


当 单 击 box 时 ， 会 弹出 “你 点 击 了 box” 对 话 框 。 x 来 和 网 页 的 消息 
相关 的 代码 实例 可 参考 Chap9.1.html 文件 ， 在 正 浏览 
































运行 结果 如 图 9-18 所 示 。 DD ET7box 


2. 键盘 事件 
键盘 事件 是 用 户 与 键盘 交互 产生 的 事件 , 一 些 常 用 的 键盘 




















9-18 ”鼠标 事件 
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表 9-20 ”常用 的 键盘 事件 

















键盘 事件 说 明 
onkeydown 键盘 上 某 个 键 被 按 下 
onkeyup 键盘 上 某 个 键 被 松 开 
onkeypress 键盘 上 某 个 键 被 按 住 
【 例 9-2】 《实例 文件 : ch9\Chap9.2.html) 键盘 事件 实例 。 代 码 如 下 : 
<script> 


function keyl(le){ 
var keyCode=e.keyCode;// 获 取 事 件 的 键 码 值 
// 如 果 获取 的 键 码 值 等 于 空格 的 键 码 值 32 
if (keyCode==32){ 
alert (' 你 按 了 空格 键 ') ; 





i 图 hapy/localhost5334; ”0 国 刍 盘点 
} 
document .onkeyup=key; 一 
</script> 来 自 网 页 的 消息 x 
当 按 下 键盘 上 的 空格 键 时 , 会 弹出 “你 按 了 空格 键 ” 的 对 
话 框 9 全 你 反 了 主格 键 


相关 的 代码 实例 可 参考 Chap9.2.html 文件 ， 在 正 浏览 器 
中 运行 结果 如 图 9-19 所 示 。 






























































3. HTML 事件 
HTML 事件 是 针对 HTML 文档 出 现 的 事件 类 型 ， 如 提交 9-19 ”键盘 事件 
表单 、 改 变 列表 、 关闭 页 面 等 , 一 些 常 用 HTML 事件 如 表 9-21 
所 示 。 
表 9-21 常用 的 HTML 事件 
HTML 事件 说 明 
onload 页 面 完 成 加 载 时 触发 
onabort 图 像 加 载 中 断 时 触发 
onblur 失去 焦点 时 触发 
onchange 用 户 改变 域 的 内 容 时 触发 
onsubmit 单 击 提交 按钮 时 触发 
onfocus 获得 焦点 时 触发 
onreset 单 击 重 置 按钮 时 触发 
onresize 窗口 或 框架 被 调整 尺寸 时 触发 
onselect 文本 被 选 定时 触发 
onerror 当 加 载 文档 或 图 像 时 发 生 某 个 错误 时 触发 
onunload 用 户 退 出 页 面 时 触发 








【 例 9-3】〈 实 例文 件 : ch9\Chap9.3.html) HTML 事件 实例 。 代 码 如 下 : 
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<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>onfocus 事件 </title> 
</head> 
<body > 
<input type="text" id="box"> 
</body> 
</html> 
<script> 
var boxl=document .getElementById('box'); 来 自 网 页 的 消息 
boxl.onfocus=function() {alert (' 请 填 入 你 的 姓名 ')} 
</script> 


当 聚 焦 到 文本 框 时 , 会 弹出 “请 输入 你 的 姓名 ”对 话 框 。 Os 
相关 的 代码 实例 可 参考 Chap9.3.html 文件 ， 在 正 浏览 
器 中 运行 结果 如 图 9-20 所 示 。 
9.6.3 事件 流 图 9-20 HTML 事件 
当 页 面 元 素 触发 事件 时 ， 该 元 素 的 容器 以 及 整个 页 面 都 会 按照 特定 顺序 响应 ， 这 个 事件 传递 的 过 程 称 
为 事件 流 。 
. 事件 的 捕捉 和 事件 冒 泡 
事件 的 捕捉 是 指 从 最 上 一 级 标签 开始 往 下 查找 ， 直 到 捕获 到 事件 目标 。 事 件 冒 泡 是 指 从 事件 目标 开始 ， 


往 上 冒 泡 直到 页 面 的 最 上 一 级 标签 。 
事件 的 捕捉 使 用 得 不 是 很 多 ， 因 为 对 于 用 户 使 用 量 很 大 的 下 来 说 ， 它 不 支持 事件 捕捉 ， 但 支持 事件 
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冒 泡 





当然 我 们 可 以 选择 在 绑 定 事件 时 是 采用 事件 捕获 还 是 事件 冒 泡 , 方法 就 是 通过 addEventListener 函数 绑 

定 事件 ， 它 有 3 个 参数 ， 第 一 个 参数 表示 事件 名 ， 第 二 个 参数 表示 触发 事件 执行 的 函数 ， 第 三 个 参数 指定 

事件 是 否 在 捕获 或 冒 泡 阶段 执行 ， 若 是 tue， 则 表示 采用 事件 捕获 ， 若 是 false， 则 表示 采用 事件 冒 泡 。 
【 例 9-4】 “实例 文件 ， ch9\Chap9.4.html) HTML 事件 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 捕 捉 和 冒 泡 </title> 
<style> 
#big{ 
font-size:30px; 
width:200px; 
height:200px; 
background:yellow; 
} 
#smallf{ 
color:white; 
width:100px; 
height:100px; 
background: red; 











} 
</style> 
</head> 
<body> 
<div id="big"> 
<p>big</p> 
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<div id="small">small</div> 
</div> 
</body> 
</html> 
<script> 
var big=document .getElementById('big'); 
var small=document .getElementById('small'); 
// 为 所 有 节点 设置 监听 器 
// 事 件 捕捉 阶段 
big.addEventListener('click', function(){ 
alert ('big 捕捉 '); 
} vtrue) 7 
small.addEventListener('click', function(){ 
alert ('small 捕捉 '); 
} vtrue) 7 
// 事 件 冒 泡 阶段 
big.addEventListener('click',function(){ 
alert('big 冒 泡 '); 
},false); 
small.addEventListener('click',function(){ 
alert ('small 冒 泡 ') 7 
},false); 
</script> 


当 单 击 small 盒子 时 ， 会 依次 弹出 “big 捕捉 、small 捕捉 、small 
冒 泡 和 big 冒 泡 ”对 话 框 。 单 击 big 盒子 时 ， 会 弹出 “big 捕捉 和 big 
冒 泡 ” 对 话 框 。 

相关 的 代码 实例 可 参考 Chap9.4.html 文件 , 在 正 浏览 器 中 运行 结 
果 如 图 9-21 所 示 。 


2. 阻止 事件 冒 泡 
阻止 事件 冒 泡 是 指 阻止 事件 的 传递 ， 也 就 是 
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9-21 事件 的 捕捉 和 冒 泡 


有 件 目 标 不 会 往 上 一 级 标签 冒 泡 。 比 如 我 们 只 是 想 触 发 目 




















标 上 的 事件 ， 而 不 想 触 发 目标 上 一 级 标签 的 








件 时 ， 那 么 就 需要 阻止 导 
window.event.cancelBubble=true 和 event.stopPropagation(0) 来 阻止 事件 冒 泡 。 





【 例 9-5】》《 实 例文 件 ，ch9\Chap9.5.html〉 阻 止 事 件 冒 泡 实例 。 代 码 如 下 : 





<!DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title> 捕 捉 和 冒 泡 </title> 
<style> 

#big{ 
font-size:30px; 
width:200px; 
height:200px; 
background: yellow; 

} 

#smallf{ 
color:white; 
width:100px; 
height:100px; 
background: red; 

} 

</style> 
</head> 
<body> 
<div id="big"> 
<p>big</p> 
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有 件 冒 泡 。 这 里 我 们 使 




















第 贺 章 原生 Javascript 交互 功能 开发 


<div id="small">small</div> 
</div> 
</body> 
</html> 
<script> 
var big=document .getElementById('big'); 
var small=document .getElementById('small'); 
// 为 所 有 节点 设置 监听 器 
big.addEventListener('click',function(){ 
alert('big 冒 泡 '); 
},false); 
small.addEventListener('click', function(){ 
alert('small 冒 泡 '); 
if(window.event){ 
window.event.cancelBubble=true;// 兼 容 IE big 
}elsef{f 
event .stopPropagation();//chrome 和 firefox 等 其 他 浏览 器 
} SF 外 
}，false) 
</script> 


当 单 击 small 小 盒子 时 ， 会 弹出 “small 冒 泡 ”的 对 话 框 ， 而 不 会 紧 
接着 再 弹出 “big 冒 泡 ”对 话 框 。 

相关 的 代码 实例 可 参考 Chap9.5.html 文件 ， 在 正 浏览 器 中 运行 结 Row ~ 
果 如 图 9-22 所 示 。 图 9-22 阻止 事件 冒 泡 


国 httpi//localhost5334; P - 0 | 国明 上 天 


来 后 网 页 的 消息 X 














9.7 ” 拖 动 效果 


拖 动 效果 是 一 个 很 好 的 页 面 效 果 ， 即 将 鼠标 移 到 一 个 盒子 上 ， 按 住 鼠 标 不 放 ， 然 后 拖 动 鼠 标 ， 盒 子 能 
跟着 鼠标 移动 ， 松 开 鼠 标 ， 盒 子 就 停 在 那里 不 动 。 

可 以 发 现 ,要 完成 一 个 拖 动 效果 需要 实现 3 个 鼠标 事件 ,分 别 为 onmousedown( 鼠 标 按 下 )、onmousemove 
(鼠标 移动 ) 和 onmouseup (鼠标 松 开 )。 

下 面 我 们 来 讲 一 下 拖 动 效果 实现 的 具体 思路 。 首 先 ， 确 定 盒子 的 位 置 ， 因 为 我 们 是 通过 操作 盒子 的 left 

和 top 值 来 让 盒子 移动 的 。 其 次 ,确定 鼠标 点 在 盒子 中 的 left 和 top 值 , 以 及 确定 鼠标 在 松 开 时 盒子 的 位 置 ， 
盒子 的 位 置 可 以 通过 鼠标 在 最 终 位 置 的 clientX 和 clientY 减 去 鼠标 在 盒子 中 的 left 和 top 值 和 最 初 盒子 位 置 
的 clientX 和 clientY 来 确定 ， 具 体 的 计算 可 参考 图 9-23， 这 样 就 可 以 实现 一 个 拖 动 效果 了 。 
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图 9-23 ”确定 盒子 的 位 置 示意 图 
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通过 图 9-23 可 知 ， 左 边 为 初始 位 置 ， 右 边 为 目标 位 置 ， 原 点 为 鼠标 位 置 ， 大 黑 框 为 浏览 器 可 视 宽度 ， 
小 黑 框 为 拖 动 对 象 。 
【 例 9-6】〔 实 例文 件 ，ch9\Chap9.6.html》 拖 动 效 果实 例 。 代 码 如 下 : 
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function mouseUp () { 
this.onmousemove=null; 
this.onmouseup=nul1; 
if(this.releaseCapture) 
{ 
this.releaseCapture(); 


3 


. 
return false; 
1; 
</script. 
相关 的 代码 实例 可 参考 Chap9.6.html 文件 ， 在 正 浏览 器 中 运行 结果 如 图 9-24 所 示 。 用 鼠标 单 击 盒子 ， 
按 住 不 放 ， 拖 动 盒子 ， 可 以 随意 移动 位 置 ， 如 图 9-25 所 示 。 




















CC |O Mey//Gyanl/3/6 堪 冯 果 html 富安 让 CC OD fle///GVanly9/ 移 网 灼 呈 html 有 让 | 





9-24 页面 加 载 效果 9-25 ” 拖 动 效果 
注意 : 在 JavaScript 脚本 代码 中 ，setCapture 方法 多 用 于 念 子 对 象 ， 效 果 是 对 指定 的 对 象 设 置 鼠 标 捕获 ， 
与 这 个 函数 对 应 的 是 releaseCapture 方法 ，releaseCapture 方法 释放 鼠标 捕获 。 如 果 没 有 setCapture 和 
releaseCapture， 那 么 在 按 住 筷 标 之 后 快速 移动 筷 标 ， 就 有 可 能 出 现 和 鼠标 移动 了 ，box 还 在 原 地 的 情况 。 


9.8 cookie 存储 


如 果 有 一 个 网 站 ， 用 户 每 天 都 需要 登录 访问 ， 这 时 用 户 就 需要 一 种 可 以 直接 访问 网 站 的 方式 ， 而 不 用 
每 次 登录 后 才能 访问 。 这 时 cookie 存储 的 作用 就 体现 出 来 了 。cookie 是 指 网 站 放置 在 计算 机 上 的 小 文件 ， 
其 中 存储 着 有 关 用 户 的 信息 。cookie 可 以 记 住 用 户 或 者 让 用 户 避 免 在 每 次 访问 某 些 网 站 时 都 必须 登录 ， 从 
而 提升 用 户 的 浏览 体验 。 但 是 ， 某 些 cookie 可 能 会 跟踪 用 户 访 问 的 网 站 ， 从 而 危及 隐私 安全 。 


9.8.1 cookie 简介 



































cookie 汉语 是 小 甜点 的 意思 ， 对 于 开发 者 来 说 它 就 像 小 甜点 。cookie 是 当 用 户 浏览 某 网 站 时 ， 网 站 存 9 
储 在 用 户 计算 机 上 的 一 个 小 文本 文件 ， 它 记录 了 用 户 的 ZD 号 、 密 码 、 浏 览 过 的 网 页 、 停 留 的 时 间 等 信息 ， 
当 用 户 再 次 来 到 该 网 站 时 ， 网 站 通过 读 取 cookie， 得 知 用 户 的 相关 信息 ， 然 后 做 出 相应 的 动作 ， 如 在 页 面 
显示 欢迎 用 户 的 标语 ， 或 者 让 用 户 不 用 输入 IJD、 密 码 就 直接 登录 等 。 
在 正 11 版 本 中 ， 具 体 的 cookie 查看 方法 是 ， 按 顺序 单 击 正 浏览 器 菜单 栏 里 的 工具 按钮 :“intemet 选 
项 一 常规 一 设置 一 intemet 临时 文件 一 查看 文件 ” 里 面 有 用 户 访问 过 的 所 有 cookie， 如 图 9-26 所 示 。 每 个 
cookie 实际 上 就 是 一 个 文件 ， 里 面 保存 着 一 些 字符 数据 。 
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2018/5/9 11:22 
2 KB 2018/5/9 11:22 
6 KB 2018/5/9 11:16 
KB 2018/4/4 23:14 
2018/4/6 951 
2018/4/6 23:11 
KB 2018/4/8 10:36 
2018/4/9 921 
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httpy/spcmgrqq， 2018/4/7 1101 


httpsV/helpdaohangl 
ve 
7,152 个 项 目 。 远 中 1 个 项 目 





9-26 计算 机 上 存储 的 cookie 


如 果 不 希 望 网 站 在 你 的 计算 机 上 存储 cookie， 可 以 阻止 cookie。 但 是 阻止 cookie 可 能 会 导致 某 些 页 面 
无 法 正确 显示 ， 或 者 可 能 会 从 网 站 收 到 一 条 消息 ， 提 醒 你 需要 允许 cookie 才能 查看 该 网 站 。 








9.8.2 cookie 分 类 


cookie 分 为 临时 cookie (会 话 cookie) 和 持久 cookie。 

会 话 cookie 是 指 不 设 定 它 的 生命 周期 时 ， 浏 览 器 的 开启 到 关闭 就 是 一 次 会 话 ， 当 关闭 浏览 器 时 ， 会 话 
cookie 就 会 销毁 。 会 话 cookie 一 般 不 保存 在 硬盘 上 而 是 保存 在 内 存 里 。 

持久 cookie 则 是 设 定 了 它 的 生命 周期 ， 关 闭 浏览 器 之 后 ， 它 不 会 销毁 ， 直 到 设 定 的 过 期 时 间 到 期 。 对 
于 持久 cookie， 可 以 在 同一 个 浏览 器 中 传递 数据 ， 比 如 ， 在 打开 淘宝 购物 页 面 登录 后 ， 再 点 开 一 个 想 买 的 
商品 页 面 ， 依 然 是 登录 状态 ， 即 便 你 关闭 了 浏览 器 ， 再 次 开启 浏览 器 ， 依 然 会 是 登录 状态 。 这 是 因为 浏览 
器 会 把 cookie 保存 到 硬盘 上 ， 关 闭 后 再 次 打开 浏览 器 ， 这 些 cookie 依然 有 效 ， 直 到 超过 设 定 的 过 期 时 间 。 


9.8.3 “cookie 的 创建 、 查 找 、 修 改 和 删除 


在 JavaScript 中 操作 cookie 是 一 件 很 简单 的 事情 ， 只 需要 对 新 增 的 cookie 的 属性 进行 赋值 就 可 以 了 。 
在 JavaScript 中 可 以 使 用 document.cookie 属性 创建 、 查 找 、 修 改 和 删除 cookie。 















































1. 使 用 JavaScript 创建 cookie 
使 用 JavaScript 创建 cookie， 代 码 如 下 : 


<script> 
document .cookie="username=name"; 
</script> 


如 上 面 的 代码 ， 就 在 页 面 中 保存 变量 name 的 值 到 cookie 中 。 


























2. 使 用 JavaScript 查找 cookie 
使 用 JavaScript 查找 cookie， 代 码 如 下 : 


<script> 
document .cookie="username=jack"; 
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Var x=document.cookie; 
document .write (x); 
</script> 


如 上 面 代码 ， 我 们 先 创建 了 一 个 cookie， 然 后 赋值 给 一 个 变量 x， 然 后 打印 到 页 面 中 ， 在 下 浏览 器 中 
运行 结果 如 图 9-27 所 示 。 





对 
UD 


























3. 使 用 JavaScript 修改 cookie 
cookie 的 修改 类 似 于 创建 ， 旧 的 cookie 将 被 覆盖 。 例 如 下 


<script> 
document .cookie="username=jack"; 
document .cookie="username=mark";// 新 建 的 cookie 
Var x=document.cookie; 
document .write (X) 7 
</script> 


在 下 浏览 器 中 运行 结果 如 图 9-28 所 示 。 











= 


代码 : 














国 hepyV/lecalhos 
文件 旧 。 篇 续 (E) 查看 (V) ”收藏 天 ( ” 


username=iack usemame=mark 





9-27 创建 cookie 9-28 修改 cookie 
4. 使 用 JavaScript 删除 cookie 


删除 cookie 非常 简单 ， 只 需要 把 cookie 的 有 效 期 设置 成 以 前 的 时 间 即 可 ， 如 下 面 代 码 ， 把 cookie 的 有 
效 期 设置 为 Thu, 01 Jan 1970 00:00:00 GMT。 


<script> 
document .cookie="username=jack"; 
document .cookie="username=mark;expires=Thu, 01 Jan 1970 00:00:00 GMT"; 
Var x=document .cookie; 
document .write (x); 
</script> 


通过 上 面 的 代码 会 发 现 cookie 已 经 被 删除 ， 页 面 上 打印 不 出 cookie 了 。 


9.8.4 cookie 属性 
cookie 代码 如 下 : 


<script> 
document .cookie="username=name;path=/"; 
</script> 


代码 中 包含 了 cookie 的 两 个 属性 ,包括 cookie 的 正文 和 读 取 路 径 ， 它 们 以 分 号 隔 开 ， 每 个 cookie 属性 









































都 使 用 “属性 = 值 ”的 格式 来 表示 。 除 了 上 面 两 个 属性 ，cookie 还 有 一 些 其 他 属性 ， 如 表 9-22 所 示 。 
表 9-22 cookie 属性 
属 性 名 合 “ 发 所 :二 手 
path 读 取 cookie 的 路 径 path=/: 
expires cookie 的 过 期 时 间 expires=Thu. 03 Jan 2020 8:00:00 GMT: 
domain 读 取 cookie 的 域名 domain=taobao.com: 
secure 传输 加 密 Secure: 
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1. path 
cookie 是 个 网 页 所 创建 ， 但 并 不 只 是 创建 cookie 的 网 页 才能 读 取 该 cookie。 在 默认 情况 下 ， 与 创 
建 cookie 的 网 页 在 同一 目录 或 子 目录 下 的 所 有 网 页 都 可 以 读 取 该 cookie， 其 代码 如 下 : 


D:/a.html 
D:/one/b.html 
D:/one/two/c.html 


如 果 在 ahtml 中 设置 了 根 目录 path=/， 那 么 a.html、b.html 和 c.html 都 可 以 通过 document.cookie 读 取 
里 面 的 信息 ， 而 如 果 设置 了 path=/D:/one， 那 么 就 只 有 b.html 和 chtml 能 够 读 取 到 cookie。 

path 中 区 分 大 小 写 ， 如 path=/D:/one 写成 path=/d:/one， 那 么 就 会 形成 一 个 新 的 cookie。 

如 何在 一 个 cookie 中 存储 不 同类 型 的 信息 呢 ? 例如 姓名 、 性 别 和 年 龄 。 其 实 设置 多 个 值 很 简单 ， 只 需 
要 在 cookie 的 第 一 个 属性 里 设置 ， 用 逗号 分 开 就 可 以 了 ， 其 代码 如 下 : 


<script> 
document .cookie="name=jack, sex=men,age=18"; 
































有 



































国 rap/ecahonssst DC| 国 locehon 
文件 站 沽 家 (FE) 下 看 (V) 收 茂 夫 (A， 工具 门 。 帮助 (H) 


Var x=document .cookiez 
document .wIite (X) 7 
</script> 


name=jack,sex=men,age=18 ~ 
在 正 浏 览 器 中 运行 结果 如 图 9-29 所 示 。 Ra 


9-29 设置 多 个 cookie 值 





2. expires 

expires 用 来 控制 cookie 的 生命 周期 , 也 就 是 cookie 在 硬盘 上 存储 的 时 间 。 时 间 格 式 必 须 是 标准 的 GMT 
格式 , 如 expires=Thu, 03 Jan 2020 8:00:00 GMT; 通常 设置 cookie 时 间 都 采用 下 面 这 种 在 当前 时 间 的 基础 上 
增加 指定 时 间 的 方式 : 

<script> 


var expire=new Date (new Date() .getTime()+1*600000);// 相 对 于 当前 ,设置 了 10 分 钟 的 cookie 有 效 期 
</script> 


如 果 不 设置 ， 那 么 cookie 不 会 被 写 入 硬盘 ， 关 闭 当前 页 面 ，cookie 将 会 被 删除 ， 如 果 设 置 为 早 于 当前 
的 时 间 ， 将 会 删除 cookie。 

3. domain 

很 多 网 站 除了 主 域名 以 外 , 还 有 很 多 二 级 域名 , 例如 百度 除了 www.baidu.com 外 , 还 有 map.baidu.com、 
pan.baidu.com、hi.baidu.com 等 。 通 常 系统 出 于 安全 考虑 ， 只 允许 每 个 域名 访问 自己 所 创建 的 cookie。 如 果 
想 要 多 个 域 共 享 cookie 信息 ， 就 需要 设置 cookie 的 domain 属性 。 例 如 下 面 代码 : 





<script> 
document .cookie="name=jack;domain=baidu.com" 
</script> 
这 时 ， 这 个 cookie 就 可 以 被 百度 的 所 有 二 级 域 中 的 页 面 所 共享 了 。 
4. secure 











secure 属性 是 用 来 保证 cookie 安全 的 。 表 示 创 建 的 cookie 只 能 在 HITPS 连接 中 被 浏览 器 传递 到 服务 器 
端 进行 会 话 验 证 ， 如 果 是 HITP 连接 则 不 会 传递 该 信息 ， 所 以 不 会 被 窃听 到 。 设 置 secure 属性 很 简单 ， 只 
需 在 创建 cookie 时 ， 用 分 号 隔 开 secure 属性 就 行 了 。 例 如 下 面 代码 : 

<script> 


document .cookie="name=jack, 3ex=men,age=18;domain=baidu.com;secure" 
</script> 


9.8.5 ”cookie 案例 
在 下 面 的 cookie 案例 中 , 我们 将 创建 cookie 来 存储 访问 者 名 称 。 首 先 ， 访 问 者 访问 Web 页 











时 
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要 求 填写 姓名 ， 该 姓名 会 存储 在 cookie 中 。 访 问 者 下 一 次 访问 页 面 时 ， 会 看 到 一 个 欢迎 的 消息 。 详 细 的 内 
容 可 参考 代码 里 的 注释 。 
【 例 9-7】 实例 文件 ，ch9\Chap9.7.html》cookie 实例 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>cookie</title> 
</head> 
<head> 
<script> 
// 设 置 cookie 值 的 函数 ,创建 一 个 函数 用 于 存储 访问 者 的 名 字 
function setCookie (username,name){ 
Var d=new Date(); 
d.setTime (d.getTime()+60000) ;// 设 置 cookie 有 效 时 间 , cookie 一 分 钟 后 到 期 
var expires="expires="+d.toGMTString () ;// 根 据 格林 威 治 时 间 (GMT) 把 Date 对 象 转换 为 字符 串 , 并 





返回 结果 
document .cookie=username+"="+name+"; "+texpires; 
} 
// 获 取 cookie 值 的 函数 
function getCookie (username){ 
var value=username+"=";// 创 建 一 个 用 于 检索 指定 cookie:username+"=" 的 变量 value 
Var arr=document .cookie.split(';"'); 
for (var i=0;i<arr.length;i++) { 
Var a=arr[il]; 
if (a.indexOf (value)==0){ // 找 到 cookie 值 
return a.substr (value.length); // 返 回 cookie 值 





. 
1 
return ""; // 如 果 没 有 找到 cookie， 返 回 "" 


} 

// 检 查 是 否 有 cookie 值 的 函数 

function checkCookie () 1{ 
Var User=getCookie ("users");// 调 用 getCookie 函数 , 传 入 参数 "users"， 获 取 cookie 值 user 
// 如 果 user 不 为 空 的 情况 
if (user!=""){ 


alert (user+ "你 好 ,欢迎 再 次 访问 "); 
// 如 果 user 为 空 的 情况 


elsef 
user=prompt ("请 输入 你 的 姓名 :") ; // 弹 出 输入 cookie 的 对 话 框 
if (user!="" && User!=nul1l)1{ 
setCookie ("users",user) ;// 调 用 上 面 setCookie () 函数 , 传 入 "users"vuser 参数 ,创建 cookie 
} 
!; 
} 
</script> 
</head> 
<body onload="checkCookie () "></body> 
</html> 


相关 的 代码 实例 可 参考 Chap9.7.html 文件 ， 在 Chrome 浏览 器 中 运行 结果 如 图 9-30 所 示 ， 在 弹出 的 输 
入 框 内 输入 任意 名 称 ， 如 图 9-31 所 示 。 这 样 浏览 器 中 就 会 以 这 个 任意 名 称 存储 在 浏览 器 中 。 
单 击 输入 框 左 侧 的 小 图 标 ， 在 弹出 的 兑换 框 中 选择 “正在 使 用 的 cookie”， 页 面 效 果 如 图 9-32 所 示 。 
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NA 






































四 一 DO x e 一 [= x 
ookie x \ D cocuie x NE 
x 全 © filey//CyUsers/Administrator/Desktop/anli/.. 让 | 二 GC 全 | © fle///C/Users/Administrator/Desktop/anli/9/cookie.html 女 | 5; 
来 自 此 网 页 正在 使 用 的 Cookie 
请 给 入 人 的 驻 各 : Nf | 已 
单 击 这 里 以 下 Cookie 是 系统 在 您 查看 此 网 页 时 设置 的 
机 
”® Cookie 
eo 加 
EE 提请 家 
图 9-30 页面 加 载 效果 

















BE 2 是 四 刚才 输入 的 cookie 
xX 合 @fleVWCYVUseryAdministrator/Desktop/anly-， 衣 | : 所 容 
来 自 此 网 页 A 
器 径 
请 纺 入 你 的 迁 人 为 阿 碳 关 





123 人 




















到 期 丰 同 
= [可 
9-31 输入 cookie 名 称 9-32 查看 cookie 


虽然 cookie 可 以 利用 JavaScript 实现 数据 存储 能 力 ， 但 cookie 并 不 像 数 据 库 那样 ， 存 储 的 数据 是 有 限 
的 ， 而 且 在 同一 个 域 中 所 能 生成 的 cookie 是 有 限 的 。 

写 入 cookie 时 必须 谨慎 ， 对 一 些 重 要 信息 ， 如 用 户 名 、 密 码 、 访 问 过 的 网 站 地 址 等 ， 最 好 不 要 写 入 ， 
有 可 能 会 被 使 用 计算 机 的 其 他 人 看 到 ， 导 致 自己 的 隐私 被 泄露 。 





9.9 正则 表达 式 


正则 表达 式 是 一 个 处 理 字 符 串 的 对 象 ， 比 如 它 可 以 检测 一 个 字符 串 是 一 个 手机 号 码 还 是 E-mail 地 址 ， 
且 可 以 对 字符 串 进行 替换 和 搜索 操作 。 


9.9.1 定义 正则 表达 式 对 象 


定义 正则 表达 式 对 象 有 两 种 方法 : 

第 一 种 是 直接 调用 RegExp0， 代 码 如 下 : 

Var 正则 名 称 =new RegExp (正则 表达 式 , 修 饰 符 ) 

第 二 种 是 直接 用 字面 量 来 定义 ， 代 码 如 下 : 

var 正则 名 称 =/ 正 则 表达 式 / 修 饰 符 

使 用 字面 量 定义 的 正则 表达 式 对 象 实际 上 就 调用 了 RegExp(O 构 造 函数 来 创建 ， 所 以 这 两 种 定义 正则 表 
达 式 对 象 的 方法 是 等 价 的 ， 其 代码 如 下 : 

<script> 

// var reg=new RegExp('^china'); 

alert(reg.test('chinadream') ) ;// 结 果 为 上 true 
Var reg=/^china/; 
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alert(reg.test('chinadream') ) // 结 果 为 true 
</script> 


9.9.2 正则 表达 式 一 一 传 参 














在 上 一 小 节 的 代码 中 ,使 用 正则 表达 式 检测 字符 串 中 是 否 含有 china， 可 以 看 到 使 用 字 


























量 定义 的 正则 








表达 式 ， 双 斜 杠 里 面 写 的 都 是 “匹配 表达 式 ”， 并 不 是 字符 串 类 型 的 值 。 所 以 ， 如 果 匹 配 模式 需要 动态 改变 









































寺 ， 字 面 量 定义 的 正则 表达 式 就 束手无策 了 ， 因 为 参数 会 被 当 作 是 “匹配 表达 式 ” 来 使 
第 一 种 定义 正则 表达 式 对 象 的 方法 了 ， 其 代码 如 下 : 
<script> 
Var name="'jock'; 
Var re=new RegExp ("^ 第 一 名 是 "+name) 
alert (re.test(' 第 一 名 是 jock'));// 结果 为 true 
</script> 
































。 这 时 就 只 能 使 





























看 上 面 的 代码 会 发 现 , 正则 会 随 着 参数 name 的 改变 去 改变 匹配 的 规则 。 这 种 方法 用 于 匹配 表达 式 有 一 


部 分 无 法 在 编码 时 确定 时 使 用 。 


9.9.3 正则 表达 式 常用 方法 
1.test() 方 法 








test0 方 法 主要 是 检测 字符 串 中 是 否 有 正则 表达 式 要 查找 的 内 容 ， 找 到 返回 tue， 找 不 到 返回 





false。 例 如 下 











面 代 码 : 

<script> 
var reg=/\d/;// 检 测字 符 串 中 是 否 有 数字 
alert (reg.test('123'));// 结 果 为 true 
alert (reg.test('abc'));// 结 果 为 false 

</script> 


2. exec() 方 法 











exec() 方 法 用 于 检索 字符 串 中 的 正则 表达 式 的 匹配 ， 返 回 一 个 数组 ， 其 中 存放 匹配 的 结果 。 如 果 未 找到 
匹配 ， 则 返回 值 为 null。execO 对 只 会 返回 满足 条 件 的 第 一 个 字符 ， 不 受 修饰 符 g 的 影响 ， 其 代码 如 下 : 

















<script> 

Var str='al23abc'; 

var regl=/\d/g; 

Var reg2=/\d/; 

alert('regl 的 结果 '+regl .exec (str)+'\nreg2 的 结果 '+reg2 .exec (str)) 
</script> 


在 正 浏 览 器 中 运行 结果 如 图 9-33 所 示 。 
3. search() 方 法 


search0 方 法 用 来 查找 第 一 次 匹配 的 子 字符 串 的 位 置 ， 搜 到 则 返回 找到 的 子 字符 串 的 索引 号 ， 找 不 到 返 








可 -1， 其 代码 如 下 : 
<script> 
Var str='abcdefg'; 
var reg=/e/;// 检 测字 符 串 中 是 否 有 数字 
alert (str.search (reg)); 
</script> 


在 正 浏 览 器 中 运行 结果 如 图 9-34 所 示 。 
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来 自 网 页 的 消息 


全 


reg1 的 结果 1 
reg235 结 果 1 


图 9-33 使 用 exec() 方 法 后 的 运行 结果 
4. replace() 方 法 
Teplace() 方 法 用 
表达 式 或 者 子 字符 串 ， 表 示 匹 配 需要 被 替换 的 
匹配 则 会 替换 所 有 结果 ， 否 则 只 蔡 换 第 一 个 
<script> 
var str=' 我 是 一 只 小 蜜蜂 呀 小 蜜蜂 '; 
var reg=/ 小 蜜蜂 / 


alert (str.replace (reg, ' 小 老虎 ')); 
</script> 


在 正 浏览 器 9 
































已 
局 








运行 结果 如 图 9-35 所 示 。 


5. match() 方 法 
match0 方 法 用 来 匹配 字符 串 ， 匹 配 到 则 返 


<script> 
var str='1l23abc'; 
Var reg=/\d/g; 
console.log(str.match (reg)); 
</script> 


在 正 浏览 器 9 






































h 运 行 结果 如 图 9-36 所 示 。 






来 和 网 页 的 消息 


全 我 是 一 只 小 老虎 闻 小 宣 妖 





Cw ] 
图 9-35 使 用 replace() 方 法 后 的 运行 结果 


是 9.9.4 元 字符 和 修饰 符 








来 将 字符 串 中 的 某 些 子 字符 中 


匹配 到 的 内 容 ， 格 式 为 数组 ， 匹 配 不 到 则 返 


来 自 网 页 的 消息 。 XX 








图 9-34 使 用 search() 方 法 后 的 运行 结果 





蔡 换 为 需要 的 内 容 ， 有 两 个 参数 ， 第 一 个 参数 可 以 为 正则 
内 容 ， 第 二 个 参数 为 被 替换 的 新 的 子 字符 串 。 如 果 声 明 为 全 





匹配 到 的 结果 ， 其 代码 如 下 : 





回 null。 代 码 如 下 : 





国 hp -0| 国 Te 
文件 中] 瀹 误 E) 坦 看 IV) 收藏 大 (A] 工具 (T) 
(@°|IA'l[IO' le xX 。 虑 beam 加 


4 [ooject Array] Pe ei 
~ 


Nocahost6 


D(H) 














v 


Rs 
折 100% ~ 


图 9-36 使 用 match() 方 法 后 的 运行 结果 

















元 字符 是 辅助 匹配 表达 式 的 一 种 特殊 字符 ， 它 们 不 能 被 直接 理解 为 字面 意思 。 元 字符 如 表 9-23 所 示 。 
表 9-23 元 字符 
元 字 符 说 明 
除 换行 符 以 外 的 字符 








转 义 字符 
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续 表 
元 字 符 说 明 
| 或 操作 符 两 边 任意 一 个 
\d 0 一 9 的 数字 
Dp 非 数 字 
Ww 字母 、 数 字 或 下 画 线 
WwW 非 字母 、 数 字 或 下 画 线 
's 任何 空白 字符 ， 包 括 空格 、 制 表 符 、 换 页 符 等 
\S 任何 非 空 白字 符 
^ 字符 串 的 开头 部 分 
$ 字符 串 的 结尾 部 分 
\b 字符 串 的 边界 、 开 头 或 结尾 
B 非 字 符 串 的 边界 
站 0 次 或 多 次 
? 0 次 或 一 次 
+ 一 次 或 多 次 
{ny} n 次 
{n, } 了 n 次 以 及 n 次 以 上 
{n,m} 最 少 n 次 ,最 多 m 次 
¥f 换 页 符 
Yr 回 车 符 
un 换行 符 
\t 制 表 符 
V 垂直 制 表 符 














每 一 个 元 字符 都 表示 匹配 表达 式 中 的 一 个 匹配 项 ， 对 于 字符 集 来 说 也 是 这 样 。 使 用 一 对 方 括号 包含 指 











定 的 字符 ， 就 可 以 构成 一 个 匹配 字符 集 。 字 符 集 的 构成 可 以 通过 “-” 号 来 指定 范围 ， 其 代码 如 下 : 


<script> 


Var str='-123abcABC-'; 
var reg=/[a-zA-20-9]/g // 匹 配 所 有 大 写字 母 、 小 写字 母 和 数字 


console.log(str.match (reg)); 


</script> 


在 正 浏 览 器 9 








h 运 行 结果 如 图 9-37 所 示 。 























也 可 以 指定 字符 集中 的 一 些 需要 匹配 的 字符 范围 ， 如 [A-Ca-c1-3] 匹 配 字母 ABC、abc 和 数字 123。 但 
如 果 “^” 符 号 出 现在 字符 集 的 开头 ， 那 么 它 表示 的 就 是 男 一 个 意思 了 ， 其 代码 如 下 : 


<script> 











var reg=/[^1-5]/g;// 匹 配 除了 1,2,3,4,5 以 外 的 字母 、 数 字 和 字符 
var str='abc1l2345678"' 
alert (str.match (reg)) 


</script> 








在 正 浏 览 器 中 运行 结果 如 图 9-38 所 示 。 























有 时 会 使 


<script> 





Var regl=/ (abc)+/g; 





对 小 括号 来 组 成 一 个 复合 的 匹配 项 ， 系 统 在 进行 匹配 时 会 把 它 作为 一 个 整体 ， 其 代码 如 下 : 


的 


NA 
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Var reg2=/abc+/g; 

Var str="abccc'} 

alert ('regl 的 结果 '+str.match (reg1)+'\nreg2 的 结果 '+str.match (reg2)) 
</script> 


在 正 浏览 器 中 运行 结果 如 图 9-39 所 示 。 
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图 9-37 元 字符 9-38 ”字符 集 范围 9-39 ”字符 集 复合 
正则 表达 式 修饰 符 有 以 下 几 种 ， 如 表 9-24 所 示 。 
表 9-24 ”修饰 符 


不 区 分 大 小 写 
全 局 匹配 ， 查 找 所 有 匹配 而 非 在 找到 第 一 个 匹配 后 停止 
执行 多 行 匹 配 。 当 字符 囊 含有 Wn， 并且 正 则 表达 式 中 含有 人 ^ 或 的 时 候 ，m 修饰 符 才 有 作用 


修饰 符 g 在 前 面 的 例子 中 已 经 用 到 ， 修 饰 符 i 和 m 的 用 法 ， 其 代码 如 下 : 














<script> 
Var regl=/^abc/mi; 来 写 网 机 的 灌 息 
Var reg2=/^abc/m; 
Var reg3=/^abc/i; reg1 的 二 时 true 
Var str="aa\nABC"; ee 
alert('regl 的 结果 '+regl.test (str)+'\nreg2 的 结果 '+reg2.test ™ oy 

(str) +'\nreg3 的 结果 '+reg3.test (str)) 
</script> 
在 下 浏览 器 中 运行 结果 如 图 9-40 所 示 。 图 9-40 修饰 符 1 和 m 的 用 法 











9.10 ”Ajax 技术 


Ajax 全 称 Asynchronous JavaScript And XML， 译 为 异步 的 JavaScript 和 XML。Aijax 是 一 门 技术 ， 不 是 
一 门 编程 语言 。 
东 9.10.1 Ajax 简介 


Ajax 是 一 种 用 于 创建 快速 动态 网 页 的 技术 ， 通 过 在 后 台 与 服务 器 进行 少量 数据 交换 ，Ajax 可 以 使 网 页 
实现 异步 更 新 。 Ajax 的 优点 是 可 以 在 不 重新 加 载 整个 网 页 的 情况 下 , 对 网 页 的 某 部 分 进行 更 新 。 不 使 用 Ajax 
的 传统 网 页 ， 如 果 需 要 更 新 内 容 ， 那 么 必须 刷新 整个 网 页 。 
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Ajax 应 用 程序 独立 于 浏览 器 和 平台 ， 它 是 一 种 
跨 平台 、 跨 浏览 器 的 技术 。 

例如 我 们 在 百度 搜索 框 内 输入 Ajax， 会 发 现下 
面 会 显示 10 条 有 关 Ajax 的 一 些 目录 信息 ,如 图 9-41 
所 示 ， 这 就 是 通过 Ajax 来 完成 的 一 个 案例 。 


9.10.2 创建 Ajax 对 象 


创建 Ajax 对 象 ， 就 是 创建 XMLHttpRequest 对 
象 ， 它 是 Ajax 的 基础 。 现 代 浏 览 器 正 7+、Firefox、 
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= 起 限 设 计 矿 条 源 代码 
a 

新 毕 岗 。 由 六 网 
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i Bi] 及 于 = 手 车 


9-41 Ajax 案例 

















Chrome、Safari 和 Opera 均 支持 XMLHttpRequest 对 象 ， 老 版 本 IEF5 和 IE6 浏览 器 使 用 ActiveXObject 对 象 。 


XMLHttpRequest 的 作用 是 在 后 台 与 服务 器 交换 数据 。 
创建 XMLHttpRequest 对 象 ， 语 法 如 下 : 


AjaxObject=new XMLHttpRequest () 7 























使 用 老 版 本 正 5 和 正 6 浏览 器 创建 ActiveXObject 对 象 ， 语 法 如 下 : 


AjaxObject=new ActiveXObject ("Microsoft .XMLHTTP") 7 


在 JavaScript 中 ， 分 别 在 现代 浏览 器 和 老 版 本 浏览 器 中 创建 Ajax 的 代码 如 下 : 


Var AjaxObject; 
if (window.XMLHttpRequest) 





//IE7+, Firefox,Chrome,Opera, Safari 中 创建 XMLHttpRequest 对 象 


AjaxObject=new XMLHttpRequest (); 
} 
else 
上 

// IE6，IE5 创建 RctiveX 创建 对 象 


AjaxObject=new ActiveXObject ("Microsoft .XMLHTTP") 


} 
9.10.3 Ajax 请 求 和 响应 


1. Ajax 请 求 























我 们 使 用 XMLHttpRequest 对 象 的 open0 和 send() 方 法 把 请 求 发 送 到 服务 器 .open0 和 send() 方 法 具体 内 


容 如 表 9-25 所 示 。 


表 9-25 open() 和 send() 方 法 具体 内 容 





方 ” 法 


open (method, URL, async) 


说 明 


method: 请 求 的 类 型 ，GET 或 者 POST 
URL: 文件 在 服务 器 上 的 位 置 
async: true (异步 ) 或 者 false (同步 ) 





send (string) 











Ajax 请 求 GET 和 POST 的 简单 区 别 如 下 : 











将 请 求 发 送 到 服务 器 
string: 仅 用 于 POST 请 求 


。 使 用 GET 请 求 发 送 数 据 量 比 较 小 ，POST 请 求 发 送 数据 量 大 。 





























。 使 用 Get 请 求 时 ， 参 数 在 URL 中 显示 ， 使 用 POST 方式 则 不 会 显示 ， 所 以 请 求 中 有 一 些 重要 信息 
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如 账号 和 密码 ， 最 好 是 用 POST 请 求 。 
。 GET 请 求 需 注 意 缓存 问题 。GET 请 求 会 被 客户 端的 浏览 器 缓存 起 来 ， 别 人 可 以 从 浏览 器 的 历史 记 
录 中 读 取 到 数据 ， 如 账号 和 密码 ， 而 POST 请 求 则 不 需 担 心 这 个 问题 。 








2. Ajax 响应 

当 数 据 请 求 发 送 到 服务 器 后 ， 服 务 器 会 做 出 响应 ， 我 们 通过 使 用 XMLHttpRequest 对 象 的 responseText 
或 responseXML 属性 来 获得 服务 器 响应 的 数据 。responseText 获得 字符 串 形式 的 响应 数据 ，responseXML 
获得 XML 形式 的 响应 数据 。 


[kat 
9.10.4 onreadystatechange 事件 


回 % 











当 发 送 一 个 请 求 后 ， 客 户 端 无 法 确定 什么 时 候 会 完成 这 个 请 求 ， 所 以 需要 用 事件 来 捕获 请 求 的 状态 ， 
XMLHttpRequest 对 象 提供 了 onreadystatechange 事件 来 完成 。 每 当 readyState 改变 时 , 就 会 触发 
onreadystatechange 事件 ，readyState 属性 存 有 XMLHttpRequest 的 状态 信息 。 

XMLHttpRequest 对 象 的 3 个 重要 的 属性 如 表 9-26 所 示 。 


表 9-26 XMLHttpRequest 对 象 的 属性 


属 性 说 ”有明 
onreadystatechange 存储 函数 ， 每 当 readyState 属性 改变 时 ， 就 会 调用 该 函数 
存 有 XMLHttpRequest 的 状态 。 从 0 到 4 发 生变 化 

0: 请 求 未 初始 化 

1: 服务 器 连接 已 建立 
ne 2: 请 求 已 接收 

3 

4 








: 请 求 处 理 中 
: 请 求 已 完成 ， 且 响应 已 就 绪 
200: "OK" 
404: 未 找到 页 面 
在 onreadystatechange 事件 中 ， 规 定 当 服务 器 响应 已 做 好 被 处 理 的 准备 时 所 执行 的 任务 。 当 readyState 
等 于 4 且 状 态 为 200 时 ， 表 示 响 应 已 就 绪 ， 此 时 就 可 以 执行 onreadystatechange 事件 中 的 任务 了 。 


status 














9.10.5 ”Ajax 案例 


下 面 我 们 用 JavaScript 来 完成 一 个 简单 的 小 案例 。 
首先 ， 在 Ajax 页 面 同 目录 下 创建 一 个 two.txt 文件 ,文件 的 内 容 是 李白 的 《静夜 思 》，two.txt 文件 是 Ajax 
请 求 的 内 容 。 其 次 ， 按 照 Ajax 步骤 写 JavaScript 代码 。 
【 例 9-8】〔 实 例文 件 ，ch9\Chap9.8.html》Ajax 实例 。 代 码 如 下 : 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>ajax</title> 
<style> 
*{ margin:0;padding:0;} 
#box{ 
width:150px; 
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相关 的 代码 实例 可 参考 Chap9.8.html 文件 ， 在 正 浏览 器 中 运行 结果 如 图 9-42 所 示 。 
当 用 鼠标 单 击 “ 第 一 章 的 内 容 ” 时 ， 盒 子 box 中 将 变 成 如 图 9-43 所 示 的 内 容 ， 但 是 页 面 并 没有 刷新 。 









(DO 


窗 前 明月 光 ， 
疑 是 地 上 霜 。 


举 头 望 明 月 ， 
低头 思 故 乡 。 











225% ~ 
图 9-42 页面 加 载 效果 
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a 
9.11 面向 对 象 基础 
在 JavaScript 中 ， 面 向 对 象 是 初学 者 的 一 个 难点 知识 部 分 ， 本 节 我 们 将 从 最 基础 的 知识 开始 介绍 。 


9.11.1 ”认识 对 象 
JavaScript 中 对 象 分 为 狭义 对 象 和 广义 对 象 两 种 。 














1. 狭义 对 象 
所 谓 狭 义 对 象 ， 就 是 用 人 这 种 字面 量 的 形式 定义 的 对 象 ， 它 是 一 组 属性 的 无 序 集合 ， 代 码 如 下 : 
<script> 
主将 obj={ 
name:" 小 红 "， 
age:"18", 
Sex:" 女 "， 


interest: [" 唱 歌 ", "跳舞 "," 弹 钢琴 "] 
} 
</script> 


上 面 的 这 段 代码 ， 只 包含 4 个 属性 ， 存 储 了 小 红 的 信息 。 

比如 现在 我 们 不 用 对 象 ， 而 是 用 数组 来 存储 小 红 的 信息 ， 其 代码 如 下 : 

和 12," 女 ",[" 唱 歌 ", "跳舞 "" 弹 钢琴 "] ]; 

</script> 

从 上 面 代码 可 以 发 现 ， 数 组 只 能 存储 值 ， 不 能 存储 键 ( 值 的 “语义 ”)， 也 就 是 数组 里 面 的 值 的 “语义 ” 
不 明确 。 而 对 象 除了 能 存储 值 ， 还 能 存储 值 的 “语义 ”。 也 就 是 说 ， 对 象 是 一 组 值 和 值 的 “语义 ”的 封装 。 


2. 广义 对 象 
广义 对 象 也 是 对 象 ， 相 比较 于 狭义 对 象 ， 它 还 有 一 些 其 他 的 内 容 。 比 如 DOM 元 素 就 是 对 象 ， 但 它 还 
包括 一 些 其 他 的 内 容 ， 其 代码 如 下 : 
<body> 
<div id="box"></div> 
</body> 
<script> 
Var box=document .getElementById ("box"); 
alert (typeof (box)); //object 
box.name=" 小 红 "7 
box.age="18"7 
box.sex="nv"? 
box.interest=[" 唱 歌 ", "跳舞 "," 弹 钢琴 "] 
</script> 
在 上 面 的 代码 中 ， 我 们 通过 DOM 方法 得 到 了 一 个 DOM 对 象 ， 此 时 可 以 通过 “.” 语 法 来 给 这 个 对 象 添加 
Dame、age、sex、interest 属性 。 这 时 ， 我 们 除了 可 以 访问 添加 的 这 4 个 属性 外 ， 还 可 以 看 到 这 个 box 对 象 还 有 
一 个 HTML 标签 实体 在 页 面 上 。 
系统 内 置 的 所 有 引用 类 型 值 ， 都 是 对 象 ， 如 Function、Array、RegExp、DOM、Window、Document、 
Date、Math 等 。 它 们 都 能 添加 自 定义 属性 ， 并 且 能 够 访问 这 些 属性 。 但 是 这 些 对 象 除了 添加 的 一 组 属性 之 
外 ， 还 有 其 他 的 内 容 ， 如 上 面 讲 的 DOM 元 素 。 
但 像 这 种 对 象 ， 我 们 自己 是 不 能 创建 的 ， 也 就 是 说 平时 我 们 创建 的 对 象 都 是 狭义 的 对 象 。 
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9.11.2 “对象 的 方法 
如 果 一 个 对 象 的 属性 值 是 一 个 函数 ， 那 么 这 个 函数 就 叫 作 该 对 象 的 方法 ， 其 代码 如 下 ; 


<script> 
Var obj={ 
name:" 小 红 "， 
say:function(){ 
alert ("你 好 "); 
中 


] 
obj .say();// 调 用 对 象 的 3ay 方法 
</script> 
上 面 这 个 对 象 中 的 属性 say， 它 的 值 就 是 一 个 方法 ， 是 一 个 匿名 函数 ， 所 以 我 们 把 say 叫 作 obj 方法 。 
当 一 个 对 象 的 方法 被 调用 时 ， 这 个 函数 里 面 的 this 表示 这 个 对 象 ， 其 代码 如 下 : 
<script> 
Var obj={ 
name:" 小 红 "， 
say:function(){ 
alert (this.name); 


} 


}; 
obj .say();// 调 用 对 象 的 3ay 方法 
</script> 


在 正 浏 览 器 中 运行 的 结果 如 图 9-44 所 示 。 


























=4o Bx 





| 正 正和 本 忆 localhor 的 消 鼎 .。 ”所 100% 


9-44 ”调用 对 象 方法 





9.11.3 ”原型 链 


个 构造 函数 都 有 一 个 属性 叫 作 prototype， 指 向 一 个 空 对 象 。 这 个 构造 函数 使 用 操作 符 new 出 来 的 
个 实例 的 _proto_ 属 性 ， 也 指向 这 个 对 象 ， 如 图 9-45 所 示 。 

图 9-45 中 的 对 象 是 构造 函数 的 “原型 ” 是 实例 的 “原型 对 象 ”。 

原型 链 有 查找 的 功能 ， 当 实例 上 没有 某 个 属性 时 ， 系 统 会 沿 着 proto_ 属性 去 寻找 它 的 原型 对 象 有 没有 
这 个 属性 。 代 码 如 下 : 


<script> 
function People (name,age){ 
this.name=name; 
this.age=age; 




































































} 
// 给 People 的 原型 添加 属性 
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People.prototype={ 
"score":"90 分 " 
PF 
var hong=new People ("小 红 , 18") 
alert (hong.score) 
</script> 


在 Chrome 浏览 器 中 运行 的 结果 如 图 9-46 所 示 。 


eat CC Te >x 屋 
构造 函数 | 一 一 一 > | 对 角 x [© ocamoss: /多 hm J 闪 | 


localhosr53342 旺 示 
new s09 
_proto_ 


图 9-45 原型 链 图 9-46 ”原型 链 查找 








9.12 “就业 面试 技巧 与 解析 
9.12.1 面试 技巧 与 解析 〈 一 ) 


面试 官 : 请 问 null 和 undefined 的 区 别 是 什么 ? 
应 聘 者 : undefined: 当 声 明 的 变量 还 未 被 初始 化 时 ， 变 量 的 默认 值 为 undefined。null: 表示 空 值 ， 转 
为 数值 时 为 0。null 用 来 表示 尚未 存在 的 对 象 ， 常 用 来 表示 函数 企图 返回 一 个 不 存在 的 对 象 。 


9.12.2 面试 技巧 与 解析 (二 ) 


面试 官 : 请 讲 一 下 什么 是 事件 委托 ? 它 有 什么 好 处 ? 

应 聘 者 : 事件 委托 ， 就 是 把 自己 要 做 的 事情 委托 给 别人 去 做 ， 如 一 个 <li> 元 素 ， 本 来 自己 需要 监控 自身 
事件， 但 是 自己 不 来 监控 这 个 单 击 事件 ， 而 是 让 自己 的 父 节点 来 监控 。 

有 件 委托 好 处 : 提高 性 能 ， 如 我 们 要 给 每 个 <li> 元 素 都 添加 单 击 事件 ， 这 个 工作 量 就 大 了 ， 而 使 用 事件 
委托 ， 只 需要 将 事件 委托 给 父 元 素 (<ul>) 就 可 以 实现 。 并 且 新 添加 的 <li> 也 会 有 单 击 事件 。 











的 单 











| EE 




















218 


第 10 章 
jQuery 经 典 交互 特效 开发 


A 六 


学习 指 引 


jQuery 是 常用 的 JavaScript 功能 方法 的 一 堆 封装 , 它 在 一 定 程 度 上 加 快 了 前 端 开发 的 速度 , 缩短 了 项 目 
开发 周期 减少 了 很 多 代码 。 在 开发 中 ， 我 们 会 见 到 很 多 特效 ， 用 jQuery 实现 起 来 特别 简单 。 本 章 将 介绍 
怎样 用 jQuery 实现 一 些 特效 。 


ea 重点 导读 


。 熟 悉 jQuery 框架 介绍 。 

。 了 解 jQuery 插件 扩展 原理 及 自 定制 设计 。 
。 熟 悉 时 间 轴 特效 。 
“熟悉 tab 页 面 切换 效果 。 
熟悉 滑动 门 特效 。 

熟悉 焦点 图 轮 播 特效 。 
网 页 定位 导航 特效 。 
瀑布 流 特效 。 

。 热 悉 弹 出 层 特效 。 
"熟悉 倒 计时 效果 。 

。 热 悉 抽 奖 效果 。 








10.1 jQuery 框架 介绍 


jQuery 是 一 个 快速 、 简 洁 的 JavaScript 框架 ， 宗 旨 是 write Less，Do More， 即 写 更 少 的 代码 ， 做 更 多 的 
事情 。 它 封装 JavaScript 常用 的 功能 代码 ， 提 供 一 种 简便 的 JavaScript 设计 模式 ， 优 化 HTML 文档 操作 、 
CSS 操作 、 事 件 处 理 、 动 画 设计 和 Ajax 交互 等 。 

jQuery 的 特性 : 具有 独特 的 链 式 语法 和 短小 清晰 的 多 功能 接口 ， 具 有 高 效 灵 活 的 CSS 选择 器 ， 并 且 可 
以 对 CSS 选择 器 进行 扩展 。jQuery 还 有 一 个 比较 大 的 优势 ， 它 的 文档 说 明 很 全 ， 各 种 应 用 也 说 得 很 详细 ， 
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同时 还 有 许多 成 熟 的 插件 可 供 选 择 。 
回 


10.1.1 jQuery 的 选择 器 


jQuery 有 着 强大 的 选择 器 ,不 像 JavaScript， 只 有 getElementById、getElementsByName、getElementsBy 
TagName 和 getElementsByClassName 几 种 。 jQuery 的 选择 器 有 清晰 的 逻辑 性 , parent>child 是 匹配 父 元 素 下 
所 有 子 元 素 , prev+next 是 匹配 所 有 紧 接 在 prev 元 素 后 的 next 元 素 , 还 有 匹配 基数 偶数 项 的 函数 , 偶数 :even 
和 奇数 :odd，:eq(index) 是 匹配 一 个 给 定 索引 值 的 元 素 。 还 有 很 多 逻辑 性 的 选择 器 ， 具 体 可 以 查看 jQuery 的 
文档 ， 选 择 器 用 好 了 会 给 编写 代码 带 来 极 大 的 方便 ， 会 更 简单 明了 地 找到 你 要 操作 的 对 象 。 


10.1.2 jQuery 创建 DOM 节点 


1. 创建 元 素 节 点 

创建 元 素 节点 使 用 jQuery 的 工厂 函数 $0 来 完成 ， 如 果 想 创建 一 个 站 标签 ， 其 代码 如 下 : 
var 1i1=$('<1i></1i>') 

2. 创建 文本 节点 

如 果 想 在 上 面 所 创建 的 标签 中 添加 文本 ， 可 以 直接 在 标签 内 写 入 ， 例 如 下 面 的 代码 : 
var 1i1=$('<1i> 我 是 文本 内 容 </1i>') 


3. 创建 属性 节点 
创建 属性 节点 和 创建 元 素 节点 、 文 本 节点 一 样 使 用 JQuery 的 工厂 函数 完成 ， 例 如 下 面 的 代码 : 
var lil=$("<Ii id="b"></1i>') 


这 样 我 们 就 创建 了 一 个 含有 id 属性 的 上 标签。 


10.1.3 jQuery 添加 DOM 节点 


用 jQuery 新 创建 的 DOM 节点 不 添加 到 DOM 文档 中 是 没有 任何 意义 的 ， 将 新 创建 的 节点 添加 到 文档 
中 有 许多 种 方法 。 

1. append() 方 法 

append() 方 法 向 匹配 的 节点 内 部 追加 内 容 ， 其 代码 如 下 : 

5$("ul") .append($('<1i id="b"></1i>')) 

2. appendTo() 方 法 

appendTo() 方 法 将 所 有 匹配 的 节点 追加 到 指定 的 节点 中 ， 其 代码 如 下 : 

$('<1li id="b"></1i>') .appendTo(5("ul")) 

3. prepend() 方 法 

prepend() 方 法 向 所 有 匹配 到 的 节点 内 部 添加 并 且 前 置 的 节点 ， 其 代码 如 下 : 

$("ul") .prepend(S$('<1i id="b"></1i>')) 

4. prependTo() 方 法 

prependTo0 方 法 将 元 素 添加 到 每 一 个 匹配 的 元 素 内 部 前 置 ， 其 代码 如 下 : 
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$('<li id="b"></1i>') .prependTo($ ("u1")) 

5. after() 方 法 

after0 方 法 为 所 有 匹配 的 节点 后 面 添 加 节点 , 新 添加 的 节点 作为 目标 节点 后 的 相 邻 兄弟 节点 , 例如 下 面 
代码 : 


5$("ul") .after($ ("<p></p>")) 














匹配 节点 Wl， 然后 把 新 创建 的 元 素 p 添加 到 ul 节点 后 面 作为 相 邻 兄弟 节点 。 
6. before() 方 法 
before0 方 法 在 每 一 个 匹配 的 节点 之 前 插入 ， 作 为 匹配 元 素 的 前 一 个 兄弟 节点 。 代 码 如 下 : 
$('ul1') .before($ ("<p></p>")) 
匹配 节点 ul， 然后 把 新 创建 的 节点 p 添加 到 ul 节点 前 面 作为 ul 的 兄弟 节点 。 
10.1.4 ”jQuery 操作 DOM 属性 
1. attr() 方 法 


attr0 方 法 能 够 获取 节点 属性 ， 也 能 够 设置 节点 的 属性 。 当 attr(nature) 方 法 有 一 个 参数 时 ， 用 于 获得 当 
前 元 素 的 nature 属性 值 ， 当 attr(nature,attrValue) 有 两 个 参数 时 , attrValue 是 为 当前 节点 的 属性 nature 设置 属 
性 值 ， 其 代码 如 下 : 

$5('div') .attr ("id");// 获 取 id 的 属性 值 





2. removeAttr() 方 法 


removeAttr0 方 法 用 于 删除 节点 特定 的 属性 ， 其 代码 如 下 : 
$('div') .removeAttr ("id") ;// 删 除 div 的 di 属性 


10.1.5 jQuery 操作 DOM 样式 


1. addClass() 方 法 

addClass() 方 法 是 向 匹配 的 节点 添加 样式 ， 其 代码 如 下 : 
5("p") .addClass ("a") 

匹配 到 p 节点 ， 并 为 它 添加 一 个 类 名 为 a 的 样式 。 

2. removeClass() 方 法 

removeClass0 方 法 用 于 把 匹配 节点 的 样式 删除 ， 其 代码 如 下 : 


$("p") .removeClass ("a") 
匹配 到 p 节点， 移出 p 节点 上 的 类 名 为 a 的 样式 。 
本 节 主要 讲 了 jQuery 对 DOM 的 一 些 基本 操作 ， 大 部 分 内 容 都 会 在 后 面 的 章节 中 用 到 。 






































10.2 jQuery 插件 扩展 原理 及 自 定制 设计 


jQuery 插件 是 通过 $.f 来 进行 扩展 的 ， 其 实 我 们 简单 测试 一 下 就 明白 了 。 
先 创建 一 个 “插件 扩展 .html” 文 件 ， 并 引入 jquery-1.11.1.min.js， 然 后 再 创建 一 个 “插件 js” 文件 ， 移 
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入 到 “插件 扩展 .html” 文 件 中 。 
我 们 在 JavaScript 脚本 编写 console.log($. 血 );， 其 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 画 Se 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
</body> 
</html> 
<script src="jquery-1.11.1.min.js"></script> 
<script src=" 插 件 .js"></script> 
<script> 
console.1log($.fn); 
</script> 


在 Chrome 浏览 器 中 输出 的 结果 如 图 10-1 所 示 。 

输出 的 结果 可 以 发 现 全 是 jQuery 的 接口 ， 再 来 测试 
一 下 ， 在 JavaScript 脚本 编写 consolelog($. 包 一 
=$.prototype);， 运 行 结果 为 tue。 这 样 我 们 就 可 以 明白 了 ， 插 件 就 是 给 jQuery 的 原型 添加 功能 函数 。 

下 面 我 们 就 自 定制 一 个 小 插件 ， 实 现在 某 个 容器 中 插入 列表 <ul>， 并 给 每 个 <li> 赋 值 。 

【 例 10-1】 “实例 文件 ，ch10\Chap10.1.html)》 插件 扩展 实例 。 

插件 扩展 .html 文件 ， 代 码 如 下 : 


<!DOCTYPE html> 

<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title> 扩 展 插 件 </title> 

</head> 

<body> 

<div id="box"></div> 

<p id="p"></p> 

</body> 

</html> 

<script src="jquery-1.11.1.min.js"></script> 

<script src=" 插 件 .js"></script> 

<script> 
$("#box") .addmethods (["a","b","c","d"]); 
$("#p") .addmethods (["1","2","3","4"]); 

SMS COE © localhost:63342/anl... 


插件 js 文件， 代码 如 下 : 


// 给 jQuery 对 象 添加 addmethods 方法 
$.fn.addmethods=function(arr){ 
Var S$ul=$ ("<ul></u1>"); 
for (i=0;i<arr.length;i++){ 
Var $1i=$ ("<l1i>"+tarr[i]+"</1i>"); 
$1i.appendTo($ul) ; 
} 
$ul.appendTo (this); 























10-1 S$.fn 





相关 的 代码 实例 可 参考 Chap10.1.html 文件 , 在 Chrome 
浏览 器 中 运行 的 结果 如 图 10-2 所 示 。 

这 样 我 们 就 实现 了 一 个 给 代理 对 象 添加 <ul> 和 <li> 以 及 
内 容 的 插件 ， 更 多 的 优化 这 里 就 不 做 说 明了 。 

















图 10-2 ”插件 扩展 效果 
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10.3 ”时 间 轴 特效 


间 轴 是 一 个 按时 间 顺 序 描述 一 系列 事件 的 方式 ， 经 常 出 现在 开发 项 目 中 。 
案例 描述 了 一 个 星期 的 事件 ， 从 星期 一 到 星期 日 的 课程 。 wa 筑 器 中 运行 ， 当 页 面 加 载 完毕 ， 
果 如 图 10-3 所 示 。 当 单 击 左右 箭头 时 ， 时 间 轴 上 的 日 期 和 星期 会 随 之 变化 。 当 单 击 右 方 箭头 时 页 
果 如 图 10-4 所 示 。 
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图 10-3 ”页面 加 载 效果 图 10-4 单 击 右 方 “ 箭 头 ” 后 的 页 面 效 果 
【 例 10-2】〔 实 例文 件 ，ch10\Chap10.2.html〉》 时 间 轴 特效 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<link rel="stylesheet" href="bootstrap.min.css"> 
<style> 
*{margin:0;padding:0;} 
#bigbox{ 
overflow:hidden;position:relative;width:650px; 
margin-left:50px;border-bottom:2px solid black; 





} 

.timeLine{ 
width:1000%;height:45px;line-height:45px;font-weight:bold;list-style:none; 
margin:15px 100px;position:relative;font-size:20px; 

} 

.timeLine 1i{ 
float:left;width:120px;height:40px;line-height:40px;text-align:center; 
margin:0 10px;border-radius:20%; 

} 

.timeLine.now{ 
background-color:red;color:white; 

} 

.boxf 
width:400px;height:200px;border:1lpx solid#000;overflow:hidden; 
position:relative;left:180px;top:30px; 


#timeTable{ 
width:1000%;1ist-style:none;position:absolute;font-size:40px; 
text-align:center;line-height:200px; 


} 
#timeTable 1i{ 
width:400px;height :200px;float:left; 


} 

#1left, #right{ 
width:40px;height:40px;background:blue; color:white; text-align:center; 
font-size:30px;position:absolute;border-radius:50%; 

Dj 
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.edq(index) .addclass ("now"); 


Py function changel (index){ 
28. var ulmove=index*400; 
29. $("#timeTable") .animate ({left:"-"+ulmove+"px"},100); 
30. 是 
]) 
</script> 


分 析 : 

在 上 面 的 文档 中 ，HTML 和 CSS 中 的 代码 就 不 详细 介绍 了 。 

JavaScript 中 标记 的 jQuery 代码 分 析 如 下 : 

第 1 行 : 定义 了 一 个 变量 ， 用 于 后 面 接受 二 的 索引 值 。 

第 2 行 : 获取 timeTable 中 二 的 个 数 。 

第 3 一 12 行 : 单 击 left 事件 ， 其 中 4 一 9 行 判断 上 的 索引 值 ，10 一 11 行 分 别 调用 change 和 changel 方法 。 

第 13 一 22 行 : 单 击 right 事件 ， 其 中 14 一 19 行 判断 的 索引 值 ，20 一 21 行 分 别 调用 change 和 changel 
方法 。 

第 23 一 26 行 : change 方法 , 是 来 定义 timeLine 的 移动 方法 以 及 一 些 属性 , 其 中 使 用 了 CSS 3 的 动画 属 
性 animation，removeClass0 和 addClass0 方 法 分 别 表示 向 元 素 删 除 和 添加 类 。 

第 27 一 30 行 : changel 定义 timeTable 的 移动 方法 ， 其 中 使 用 了 CSS 3 的 动画 属性 animation。 

在 上 面 的 描述 中 ， 将 主要 的 代码 进行 了 说 明 ， 其 他 一 些 细节 可 参考 代码 注释 。 






















































































10.4 tab 页 面 切换 效果 


tab 页 面 切换 效果 是 各 大 网 站 都 经 常用 的 一 种 效果 。 
本 节 案 例 在 正 浏览 器 中 运行 ， 页 面 加载 完 毕 后 的 效果 如 图 10-5 所 示 ， 当 鼠标 悬浮 在 每 个 分 类 元 素 上 
时 ， 下 面 的 内 容 也 会 随 之 改变 ， 如 图 10-6 所 示 。 





















































英雄 联盟 
梦幻 西游 
街头 入 于 
10-5 ”页面 加 载 效果 10-6 ”鼠标 悬浮 “影视 ”后 的 页 面 效 果 


本 案例 实现 的 原理 : 在 main 中 的 某 个 li 进行 mouseover 事件 时 ， 首 先 删除 所 有 的 类 名 ， 使 其 全 部 显 
示 初 始 颜色 ， 然 后 给 当前 单 击 的 按钮 添加 指定 类 名 ， 使 其 显示 另 一 种 颜色 一 一 蓝 色 。 

box 里 面包 括 5 个 ii， 默 认 只 显示 一 个 。 为 main 的 每 个 二 添加 自 定义 属性 index， 用 来 关联 box。 然 后 
给 与 main 中 的 二 相关 联 的 box 中 的 二 添加 指定 的 属性 。 

【 例 10-3】〔 实 例文 件 ，ch10\Chap10.3.html》tab 页 面 切 换 效 果实 例 。 代 码 如 下 : 

<!DOCTYPE html> 


<html lang="en"> 
<head> 
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<script src="jquery-3.3.1.js"></script> 
<script> 
$(function () { 
到 $(".box li:eq(0)") .show() 7 
4 $(".main 1i") .each (function (index){ 
3 $ (this) .mouseover (function(){ 
4. $ (this) .addClass ("main stylel") .siblings() .removeClass ("stylel"); 
5 $(".box li:eq("+index+")") .show() .siblings() .hide(); 
6 Ds 
Ee ])7 
Ds 
</script> 


在 HTML 里 我 们 设置 了 main 和 box 两 个 ul, 在 main 中 设置 了 导航 的 内 容 , 在 box 中 存储 详细 的 内 容 。 

JavaScript 中 标记 的 jQuery 代码 分 析 如 下 : 

第 1 行 : 页 面 加 载 完成 后 ， 页 面 默认 的 效果 。 

第 2 一 7 行 : 利用 each 方法 遍历 main 中 的 每 个 li。 

第 3 一 6 行 : 为 每 个 站 绑 定 mouseover 悬浮 事件 。 

第 4 行 addClass0) 是 增加 样式 ，siblings(.removeClass0 是 移 除 当前 悬浮 之 外 的 其 他 兄弟 元 素 的 样式 ， 
$(this) 表 示 main 中 的 每 个 i。 

第 5 行 : 根据 $(this) 的 index 属性 关联 box， 显 示 相 对 应 的 内 容 。 


























10.5 ”滑动 门 特效 


当 鼠 标 滑 过 图 片 时 ， 图 片 如 同 滑动 的 门 一 样 可 以 向 上 、 下 、 左 、 右 4 个 方向 滑动 ， 这 就 是 滑动 门 的 效 
果 。 本 节 案 例 主要 讲解 鼠标 滑 过 元 素 div 时 向 左 滑动 的 效果 。 在 正 浏览 器 中 运行 ， 页 面 加 载 完毕 时 效果 如 
图 10-7 所 示 ， 当 我 们 把 鼠标 滑 过 第 二 个 div 时 ， 第 二 个 div 向 左 移动 一 定 的 距离 ， 效 果 如 图 10-8 所 示 。 



































图 10-7 页面 加 载 效果 图 10-8 ”鼠标 滑 过 第 二 个 div 时 的 页 面 效果 
【 例 10-4】 实例 文件 ，ch10\Chap10.4.html〉 滑 动 门 特 效 实例 。 代 码 如 下 : 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 滑 动 门 特效 </title> 
<style> 
#container{ 
position:relative; 
width:850px; 
height:400px; 
overflow:hidden; 
} 
divi{ 
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JavaScript 中 标记 的 jQuery 代码 分 析 : 

第 1 行 : 获取 每 个 div 的 宽度 。 

第 2 行 : 设置 到 在 一 起 的 div 宽度 。 

第 3 一 12 行 : 初始 化 每 个 div 的 位 置 。 使 用 for 循环 , 并 判断 每 一 个 div 的 位 置 , 第 一 个 div 的 left 为 0， 


第 二 个 div 为 width+0*overlap， 第 三 个 div 为 width+1*overlap， 第 四 个 div 为 width+2*overlap。 
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第 13 行 : 先 调 用 一 下 初始 化 函数 position() 。 

第 14 行 : 计算 鼠标 滑 过 某 个 div 时 其 他 需要 移动 的 div 的 距离 。 

第 15 一 26 行 : 使 用 了 闭 包 原理 ,为 每 个 div 添加 mouseover 事件 。 其 中 第 18 行 表示 每 次 移动 先 初始 化 
位 置 。 第 19 一 23 行 首先 判断 除了 第 一 个 div 之 外 ， 使 用 for 循环 计算 第 i 个 div 之 前 的 div 都 向 左 移动 move。 














10.6 ”焦点 图 轮 播 特效 


焦点 图 轮 播 一 般 是 在 网 站 很 明显 的 位 置 ， 用 图 片 组 合 播放 的 形式 。 据 国外 的 设计 机 构 调查 统计 ， 网 站 
焦点 图 的 点 击 率 明显 高 于 纯 文字 ， 在 很 多 购物 网 站 主页 面 都 可 以 看 到 。 

本 节 案 例 在 正 浏览 器 中 运行 ， 当 页 面 加 载 完毕 时 ， 页 面 效 果 如 图 10-9 所 示 。 当 我 们 静 静 地 等 待 2.5s 
后 ， 焦 点 图 开始 自动 轮 播 ， 当 单 击 左 、 右 箭头 或 者 悬浮 在 带 数 字 的 小 圆 点 上 时 ， 效 果 如 图 10-10 所 示 。 
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图 10-9 页面 加 载 效果 图 10-10 切换 图 片 效果 
【 例 10-5】 〈 实 例文 件 ， chl0\Chap10.5.html) 焦点 图 轮 播 特效 实例 。 代 码 如 下 : 





<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 焦 点 图 轮 播 效 果 </title> 
<style> 

*{margin:0;padding:0;} 

.box{ 

width:500px;height:300px;margin:30px auto;overflow:hidden;position:relative; 


#ulList{ 
list-style:none;width:1000%;position:absolute; 

1 

#ulList 1i{ 
width:500px;height:300px; float:left; 

.OlList{ 
width:300px;height:40px;position:absolute;left:100px; 
bottom:30px;list-style:none; 


} 

.olList 1i{ 
float:left;width:40px;height:40px;line-height:40px; 
text-align:center;margin:0 10px;background-color:#fff; 
border-radius:50%;cursor:pointer; 


.OlList.now{ 
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3 nowIndex= (nowIndex > 0)?(--nowIndex): (liNumber-1); 
325 change (nowIndex) 7 

33 . }) 

34. $("#right") .hover (function(){ 

35. clearInterval (useInt); 

36. }rfunction(){ 

全 useIntAgain(); 

38. Wn 

39. $("#right") .click (function(){ 

40. nowIndex= (nowIndex<liNumber-1)?(++nowIndex) :0 
41. change (nowIndex); 

42. ; 

局 $(".0olList 1i") .each (function (item){ 
44. $ (this) .hover (function(){ 

类 5 clearInterval (useInt); 

46. nowIndex=item; 

he change (item); 

48. },function(){ 

49。 useIntAgain(); 

50 DD); 

51. ]) 7 

}) 

</script> 


JavaScript 中 标记 的 jQuery 代码 分 析 如 下 : 

第 1 行 : 定义 变量 nowIndex=0; 用 于 表示 上 甘 索 引 值 。 

第 2 行 : 获取 ulList 中 二 的 个 数 。 

第 3~7 行 : 定义 轮 播 的 方法 ， 包 括 ulList 移动 的 距离 和 olList 中 的 CSS 样式 的 变化 。 

第 5 行 , ulList 向 左 移动 的 距离 。 

第 6 行 : 先 移出 olList 所 有 二 的 now 样式， 然后 给 对 应 的 olList 的 二 添加 样式 now。 

第 8 一 15 行 : 使 用 setInterval0 方 法 实现 自动 轮 播 。 

第 9 一 13 行 : 判断 nowIndex 与 最 大 索引 值 iNumber-1 的 大 小 ， 如 果 nowIndex 小 于 最 大 索引 值 
liNumber-1， 则 为 nowInterval++， 如 果 nowIndex 大 于 或 者 等 于 最 大 索引 值 iINumber-1， 则 nowInterval=0， 听 
到 刚 开始 时 的 位 置 。 

第 14 行 : 调用 轮 播 方法 change0， 并 传 入 索引 值 nowIndex。 

第 15 行 : 设置 每 轮 播 一 张 的 时 间 为 2.5s。 

第 16 一 24 行 :清除 定时 器 后 , 重 置 定 时 器 时 调用 的 方法 .也 就 是 把 第 8 一 15 行 代码 封装 成 了 useIntAgain0 
方法 。 

第 25 一 29 行 : 当 把 鼠标 悬浮 在 左边 箭头 left 时 ， 清 除 定时 器 ， 移 出 时 重 置 定时 器 ， 调 用 useIntAgain0 
方法 ， 让 轮 播 图 自动 播放 。 

第 30~33 行 : 给 left 添加 单 击 事件 ， 当 单 击 左 箭头 left 时 ， 先 判断 当前 轮 播 图 的 索引 值 nowIndex 是 否 
大 于 0， 如 果 大 于 0， 则 nowIndex=nowIndex-1; 如 果 小 于 或 等 于 0， 则 nowIndex=liNumber-1。 其 中 第 32 
行 是 调用 轮 播 方法 change0， 并 传 入 判断 的 索引 值 。 

第 34 一 38 行 : 与 第 25 一 29 行 解释 相似 ， 不 同 的 是 移入 的 是 右 侧 箭头 right。 

第 39 一 42 行 : 给 right 添加 单 击 事件 ， 当 单 击 右 箭头 right 时 ， 先 判断 当前 轮 播 图 的 索引 值 nowIndex 
是 否 小 于 最 大 索引 值 liNumber-1， 如 果 小 于 liNumber-1， 则 nowIndex=nowIndex+1; 如 果 大 于 或 等 
liNumber-1， 则 nowIndex=0。 其 中 第 32 行 、 第 41 行 是 调用 轮 播 方法 change0 传 入 判断 的 索引 值 。 

第 43 一 51 行 : 鼠标 移入 olList 中 的 下 时 轮 播 的 情况 。 其 中 第 43 行 利用 each0 方 法 为 olList 中 的 每 个 于 
绑 定 一 个 函数 。 

第 44 一 50 行 : 使 用 hover0 方 法 ， 当 鼠标 移入 olList 中 的 某 个 芷 时， 清除 定时 器 。 这 时 索引 值 nowIndex=item; 

























































































231 


HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 








mm 
如 








h 第 47 行 调 用 轮 播 方法 change0， 传 入 索引 值 nowIndex。 
第 48 一 50 行 : 当 鼠 标 移出 olList 中 的 时， 重 置 定时 器 ,调用 useIntAgain(0 方 法 ， 让 轮 播 图 自动 播放 。 
































10.7 ”网 页 定位 导航 特效 


本 节 案 例 实现 网 页 定位 导航 效果 。 在 正 浏览 器 中 运行 ， 页 面 加 载 完 ， 如 图 10-11 所 示 ， 当 单 击 左边 固 
















































































定 导 航 时 ， 右 边 的 内 容 跟 着 切换 ， 如 图 10-12、 图 10-13 所 示 ; 滑动 滚动 条 的 时 候 ， 左 边 的 导航 也 随 着 右边 
内 容 的 展示 而 进行 颜色 切换 。 网 页 定位 导航 非常 适合 展示 内 容 较 多 和 区 块 划分 又 很 明显 的 页 面 。 
Om | OO 
网 页 定位 导航 ” We 
页 面 一 页 面 四 
可 而 一 
Wm 
m= i 
mR 
图 10-11 页 面 加 载 效果 图 10-12 单 击 左 侧 “页 面 三 ”效果 图 10-13 单 击 左 侧 “页 面 四 ”效果 


【 例 10-6】 〈 实 例文 件 ， chl0\Chap10.6.html) 网 页 定位 特效 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 网 页 定位 导航 </title> 
<style> 
*{margin:0;padding:0;} 
#nav{ 
position:fixed;top:100px; left:50%;margin-left:-231lpx;width:80px; 


#nav ul li{list-style:none;} 
#nav ul li af 
display:block;margin:5px 0;font-size:14px; 
font-weight:bold;width:80px;height:50px; 
line-height:50px;text-decoration:none;color:#333;text-align:center; 
#nav ul li a:hover,#nav ul li a.stylef 
color:#fff;background:#FF8C00; 


} 

#content{ width:300px;margin:0 auto;padding:20px;height:2000px;} 

#content hl{ color:#000000; } 

#content .item{ 
padding:20px;margin-bottom:20px;border:1lpx solid #FF8C00;box-sizing:content-box; 
height:100px; 

} 

#content.item h2{ 
font-size:16px; font-weight:bold;margin-bottom:10px; 

| 

</style> 
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JavaScript 中 标记 的 jQuery 代码 分 析 如 下 : 

第 1~12 行 : 调用 jQuery 中 的 scroll0 方 法 ， 当 用 户 滚动 浏览 器 窗口 时 ， 执 行 函数 。 

第 2 行 : 获取 浏览 器 窗口 滚动 的 垂直 距离 。 

第 3 行 : 使 用 each0 遍 历 content 中 的 每 个 div， 并 为 每 个 div 设置 一 个 方法 。 

第 4 行 : 把 遍历 的 每 个 div 赋值 给 m，m 指 $("#content div").eq(index)。 

第 5 行 ， 获取 content 中 的 每 个 div 距离 浏览 器 窗口 项 部 的 距离 。 

第 6 一 10 行 : 判断 滚动 条 与 导航 条 的 关系 。 当 大 部 分 内 容 出 现时 ， 导 航 条 焦点 就 会 跳 到 相应 的 位 置 。 
第 7 行 : 根据 $("#content div) 中 的 it， 拼接 当前 导航 条 中 a 标签 的 id。 

第 8 行 : 删除 所 有 a 标签 的 style 样式 。 
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第 9 行 : 为 导航 条 焦点 所 在 位 置 的 a 标签 添加 style 样式 。 





10.8 ”导航 条 菜单 效果 


导航 条 菜单 效果 ， 就 是 当 我 们 用 鼠标 对 导航 条 进行 操作 时 ， 下 面 会 显示 出 一 个 下 拉 菜 单 ， 是 与 导航 条 
相关 的 信息 。 与 tab 栏 很 像 ， 不 同 的 是 当 不 操作 导航 条 时 ， 下 拉 菜 单一 直 是 隐藏 的 。 

本 节 案 例 在 正 浏览 器 中 运行 ， 页 面 加 载 完 毕 如 图 10-14 所 示 。 当 把 鼠标 悬浮 在 除了 “首页 ”以 外 的 导 
航 条 上 时 ， 相 应 的 下 拉 菜单 会 显示 出 来 ， 并 且 菜 单 栏 里 的 分 类 也 可 以 选择 ， 如 图 10-15 所 示 。 
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图 10-14 页面 加 载 效 果 图 10-15 下 拉 菜 单 显示 效果 
【 例 10-7】“〔 实 例文 件 ，ch10\Chap10.7.html〉》 导 航 条 菜单 效果 实例 。 代 码 如 下 : 


<!doctype html> 

<html lang="en"> 

<head> 
<meta charset="UTF-8"> 
<title> 导 航 条 菜单 效果 </title> 
<style> 

2 
margin:0;padding:0;list-style-type:none; 

} 

.navt{ 
width:605px;height:40px;line-height:40px’;text-align:center; 
font-size:20px;position:relative;background:#8B8B7A; 
margin:20px auto; 

} 

.nav-main{ 
width:100%;height:100%;1list-style:none; 

} 

nav-main>1i{ 
width:120px;height:100%;float:left;background:#8B8B7A; 
color:#fff;cursor:pointer; 

} 


.nav-main>li:hover{ 


background:#8B8B7A; 

y 

.hidden{ 
width:120px;font-size:16px;border:1lpx solid#8B8B7A; 
box-sizing:border-box;border-top:0;background:#fff; 
position:absolute;top:40px;display:none; 

1 

.hidden>uli 


list-style:none;cursor:pointer; 
.hidden 1i:hoverf{ 


background:#8B8B7A; color:#fff; 
} 
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ND 
6 Jelsef 
i num=null; 
8. . 
9. $('#box'+num) .slideDown (200); 
10. }vfunction()1{ 
EE $('#box'+num) .hide (); 
12. 1); 
13. $(".hidden') .hover( 
14. function(){ $(this).show(); 
58 // 滑 动 完成 后 执行 的 函数 
Le }, function(){ 
Ts $(this) .slideUp (200); 
18. Ds 
Ds; 
</script> 





JavaScript 中 标记 的 jQuery 代码 分 析 : 
第 1 行 : 定义 变量 num， 后 面 用 于 接收 id 的 最 后 一 个 字符 串 。 














第 2~12 行 : 运 








下 拉 菜单 消失 。 


jQuery 中 的 hover0 方 法 。 当 悬浮 到 导航 条 时 ， 对 应 的 下 拉 菜 单 出 现 ， 移 出 导航 条 ， 


第 3 行 ， 获取 $(.nav-main>li) 的 id， 通 过 console.log(Obj) 可 以 在 后 人 台 看 到 。 
第 4 一 8 行 : 判断 获取 的 Obj 是 否 为 空 ， 不 为 空 则 获取 id 的 最 后 一 个 字符 ， 赋 值 给 num; 为 空 , 则 num 


等 于 null。 


第 9 行 : #box'+num 是 拼接 对 应 下 拉 莱 单 的 id 名 。 
第 10~12 行 : 移出 导航 条 执行 的 函数 ， 下 拉 菜 单 消失 。 


第 13 一 18 行 : 运 
航 条 或 者 下 拉 莱 单 时 ， 

















jQuery 中 的 hover() 方 法 。 当 悬浮 到 下 拉 菜 单 时 ， 下 拉 菜单 会 一 直 存 在 ， 当 移出 导 





下 拉 菜 单 消失 。 


10.9 ”瀑布 流 特效 





瀑布 流 是 一 种 网 站 的 页 面 布局 ， 视 觉 上 参差 不 齐 、 多 栏 ， 随 着 页 面 不 断 的 滚动 ， 页 面 底部 会 不 断 加 载 数据 。 
本 节 瀑 布 流 案 例 ， 在 正 浏览 器 中 运行 ， 当 页 面 加 载 完 毕 时 ， 效 果 如 图 10-16 所 示 ， 当 向 下 滚动 滚动 条 
时 ， 效 果 如 图 10-17 所 示 。 








- 0 x 
LT 














ow 

















图 10-16 页面 加 载 效 果 10-17 ”向 下 滚动 滚动 条 效果 
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【 例 10-8】〈 实 例文 件 ， chl0\Chap10.8.html) 瀑布 流 特 效 实例 。 代 码 如 下 : 


JavaScript 中 标记 的 jQuery 代码 分 析 如 下 : 
第 1 一 11 行 : 调用 jQuery 中 的 scroll0 方 法 ， 当 用 户 滚动 浏览 器 窗口 时 ， 执 行 函数 。 
第 2 行 : 获取 浏览 器 窗口 滚动 的 垂直 距离 。 





ND 


SN 
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第 3 行 : 使 用 each0 遍 历 每 个 waterfall， 并 为 每 个 waterfall 设置 一 个 方法 。 

第 4 行 : 把 遍历 的 每 个 waterfall 赋值 给 pic。 

第 5 行 : pic.offset0.top 是 pic 相对 于 document 的 位 移 ，pic.height0 获 取 pic 的 高 度 。 

第 6 一 9 行 :判断 浏览 器 的 窗口 滚动 的 垂直 距离 加 上 窗口 的 可 视 高 度 与 pic 相对 于 document 的 位 移 加 上 
pic 高 度 的 大 小 。 

第 7 一 8 行 : 如 果 第 6 行 条 件 满足 ， 执 行 复制 waterfall 中 的 li， 并 把 它 添加 到 waterfall 中 。 这 样 就 实现 
了 不 断 加载 数 据 块 并 附加 至 底部 。 





























10.10 ”弹出 层 效果 


弹出 层 多 用 于 表单 验证 ， 例 如 登录 成 功 或 注册 成 功 时 会 弹出 一 个 层 来 表示 你 是 否 登录 /注册 成 功 的 消 
息 。 实 现 弹出 层 的 思路 很 简单 : 就 是 先 隐藏 内 容 ， 在 触发 某 种 条 件 后 (如 单 击 按钮 )， 将 原本 隐藏 的 内 容 显 
示 出 来 。 

本 节 案 例 在 正 浏览 器 中 运行 ， 当 页 面 加 载 完毕 时 ， 页 面 如 图 10-18 所 示 ， 当 单 击 “李白 ”时 ， 会 弹出 
一 个 div， 里 面 内 容 是 对 “李白 ”的 介绍 ， 效 果 如 图 10-19 所 示 。 
































CE ase 
李白 杜甫 王勃 
李白 x 











DAB\ntmlS ANHE PD ~ O ET 
李白 杜甫 王勃 
这 请 全 的 志 
10-18 ”页 面 加 载 效果 10-19 ”弹出 对 话 框 效果 





【 例 10.9】〔 实 例文 件 ，ch10\Chap10.9.html) 弹出 层 特效 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 弹 出 层 效 果 </title> 
<style> 
*{padding:0;margin:0;} 
ul{list-style:none;margin:15px auto;} 
1 
float:left; 
font-size:30px; 
margin-left:15px; 
border-bottom:2px solid purple; 
cursor:pointer; 
| 
-modals { 
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display:none;width:600px;height :350px;position:absolute; 
top:0;left:0;bottom:0;right:0:margin:auto;padding:25px; 
border-radius:8px;background-color:#fff; 
box-shadow:0 3px 18px rgba(0,0,255,0.5); 

上 

-head{ 
height:40px; width:100%; border-bottom:lpx solid gray7 


} 

.head h2{float:left;} 

.head span{ 
float:right;cursor:pointer; font-weight :bold;display:block; 


中 
.foot{ 
height:50px;line-height:50px;width:100%; 


border-top:lpx solid gray;text-align:right; 


} 
.comment, .foot-close{ 
padding:8px 1l5px;margin:10px 5px; border:none;border-radius:S5px; 


background-color:#337AB7;color:#fff;cursor:pointer; 


hn 

.comment{ 
background-color:#FFF;border:1px#CECECE solid;color:#000; 

} 

.box{ 
width:550px;height:250px;padding-top:20px;padding-left:20px; 
line-height:35px;text-indent:2em; 

} 

</style> 


</head> 
<body> 
<ul> 


<li class="clickl"> 李 和 白 </1i> 
<li class="click2"> 杜 甫 </1i> 
<li class="click3"> 王 勃 </1i> 


</ul> 
<!-- 弹 出 框 --> 


<div class="modals"> 


<div class="head"> 
<h2> 李 白 </h2> 
<span class="modals-close">X</span> 
</div> 
<div class="box"> 
<p> 
李白 (701 年 一 762 年) ， 字 太白 ,号 青 莲 居 士 , 又 号 "请 仙人 "， 是 唐 代 伟 大 的 浪漫 主义 诗人 ,被 后 人 誉 为 " 诗 仙 "， 与 


杜甫 并 称 为 " 李 杜 ", 为 了 与 另 两 位 诗人 李商隐 与 杜牧 即 " 小 李 杜 "区 别 , 杜甫 与 李白 又 合 称 "大 李 杜 "。 其 人 爽朗 大 方 , 爱 饮酒 作 诗 ,， 喜 


交友 . 


</p> 
</div> 
<div class="foot"> 

<input type="button” value=" 评 价 ”class="comment" /> 

<input type="button” value=" 关 闭 " class="foot-close modals-close"/> 
</div> 


</div> 
</body> 
</html> 


<script src 





jquery-3.3.1.js"></script> 


<script> 


ao 心 wb 


$ (function(){ 
$('.clickl') .click (function(){ 
$('.modals') .show(); 
DD); 
$('.modals-close') .click (function(){ 
$('.modals') .hide(); 
]}) 
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]) 
</script> 


JavaScript 中 标记 的 jQuery 代码 分 析 : 
第 1~3 行 : 添加 单 ， 当 单 击 “ 李 白 ” 时 ， 弹 出 层 显示 。 
第 4~6 行 : 添加 单 击 事件 ， 当 单 击 “X” 或 者 “关闭 ”时 ， 关 闭 弹出 

















部 











10.11 倒计时 效果 







































一 说 到 倒计时 效果 ， 大 家 肯定 不 会 陌生 ， 各 大 商场 打折 
时 间 ， 一 般 都 是 采取 倒计时 的 形式 ， 或 者 各 大 网 上 商城 ， 各 | ee 人 “加 
种 各 样 的 倒计时 都 有 。setInterval0 方 法 是 实现 倒计时 的 关键 ， Ee ee 
它 用 来 设 定 一 个 时 间 ， 时 间 到 了 ， 就 会 执行 一 个 指定 的 方法 。 | 距离 2020 年 1 月 1 日 还 有 多 长 时 间 

本 节 案 例 是 计算 当前 时 间距 离 2020 年 1 月 1 日 还 有 多 长 655 天 42 分 四 44 秒 
时 间 。 在 正 浏览 器 运行 的 结果 如 图 10-20 所 示 。 | | 





【 例 10-10】〈 实 例文 件 ，ch10\Chap10.10.html) 倒计时 效 
果实 例 。 代 码 如 下 : 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 


but 
font-size:30px;margin:20px 0;border-bottom:solid lpx #cccccc; 


10-20 ”倒计时 效果 


} 

.time divt{ 
width:80px;height:50px;font-size:30px;color:white;float:left; 
text-align:center;line-height:50px;background:limegreen; 
margin-left:15px; 

} 

</style> 
</head> 
<body> 
<h1> 当 前 时 间距 离 2020 年 1 月 1 日 还 有 多 长 时 间 </h1> 
<div class="time"> 
<div id="day">0 天 </div> 
<div id="hour">0 时 </div> 
<div id="minute">0 分 </div> 
<div id="second">0 秒 </div> 
</div> 
</body> 
</html> 
<script src="jquery-3.3.1.js"></script> 
<script> 
$ (function(){ 
Var date=new Date() .getTime(); 
Var datel=new Date (2020,1,1) .getTime (); 
var value=(datel-date)/1000; 
Var integer=parseInt (value); 
function timer(size){ 
window.setInterval (function(){ 
if (size>0){ 
var day=Math.floor (size/ (60#60#*24)); 


o va wb 
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语 Var hour=Math.floor (size/ (60*60))- (day*24); 


10. var minute=Math.floor (size/60)- (day*24#60)— (hour*60); 
于 二 var second=Math.floor (size)-(day*+24*#+60+60) - (hour*60*60)— (minute+60) 7 
12. jelsefalert(" 时 间 已 过 期 ") } 
135 if (minute <=9) {minute="'0'+minute} 
14. if(second<=9) {second="'0'+second} 
15% $('#day') .html (day+" 天 "); 
6 $('#hour') .html (hour+' 时 '); 
了 $('#minute') .html (minute+' 分 '); 
18. $('#second') .html (second+' 秒 '); 
19. Size-——? 
20. }, 1000); 
P 
这 2 timer (integer); 
Ds 
</script> 


JavaScript 中 标记 的 jQuery 代码 分 析 如 下 : 

第 1 行 : 获取 当前 的 时 间距 离 1970 年 1 月 1 日 的 毫秒 数 。 

第 2 行 : 获取 2020 年 1 月 1 日 距离 1970 年 1 月 1 日 的 毫秒 数 。 

第 3 行 : 2020 年 1 月 1 日 距离 当前 时 间 的 秒 数 差 值 。 

第 4 行 : 倒计时 总 的 秒 数 。 

第 5 一 21 行 : 定义 倒计时 函数 timer0。 

第 4 一 20 行 : 调用 setInterval0 方 法 。 

第 7 一 12 行 : 先 判断 一 下 ， 倒 计时 时 间 是 否 过 期 ， 在 倒计时 时 间 没 过 期 的 情况 下 去 计算 天 、 时 、 分 和 秒 。 
第 13、14 行 ， 如 果 分 钟 、 秒 小 于 10 的 时 候 ， 在 其 前 面 加 上 0。 

第 15 一 18 行 ， 把 计算 的 天 、 时 、 分 和 秒 泻 染 到 对 应 的 盒子 里 。 

第 19 一 20 行 : 每 1000 毫秒 ，size 自 减 1。 

第 22 行 : 调用 倒计时 函数 timer0， 传 入 计算 出 的 倒计时 总 秒 数 integer。 




















10.12 ”抽奖 效果 














本 节 我 们 来 实现 一 个 抽奖 效果 ， 转 盘 和 奖 区 由 两 和 
张 图 片 构成 ， 当 单 击 转盘 时 ， 转 盘 会 旋转 随机 角度 ， zn mat sw seem JA ee 














指针 执行 哪 块 奖 区 ， 就 会 弹出 对 应 的 奖品 信息 。 

其 中 我 们 还 对 抽奖 次 数 进 行 了 限制 ， 就 像 在 抽奖 
活动 中 不 可 能 一 直 抽 一 样 ， 我 们 设置 了 只 能 抽 3 次 。 
大 家 在 抽奖 时 是 不 是 都 很 期 望 中 大 奖 ? 但 是 ， 那 是 不 
可 能 实现 的 ， 有 很 小 的 概率 可 以 获得 。 本 案例 中 我 介 
设置 了 “汽车 ”永远 不 会 被 抽 到 。 

本 节 案 例 在 正 浏览 器 中 运行 , 页 面 加 载 完 毕 如 图 
10-21 所 示 。 当 单 击 转 盘 抽奖 时 ， 转 盘 转 动 随机 角度 ， 
弹出 对 应 的 奖品 ,如 图 10-22 所 示 。 当 单 击 次 数 超过 3 
次 时 ， 会 弹出 “你 只 有 3 次 机 会 ” 如 图 10-23 所 示 。 












































R75% 


图 10-21 页 面 加 载 效 果 
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图 10-22 ”抽奖 效果 图 10-23 ”限制 抽奖 次 数 


本 案例 中 我 们 引入 了 jQuery 中 的 旋转 插件 jQueryRotatejs， 调 用 其 中 的 totate0 方 法 来 使 转盘 旋转 。 
注意 : 要 先 引 入 jquery.js 文件 ， 后 引入 jQueryRotate.js 文件 。 
【 例 10-11】 〈 实 例文 件 ，chl0\Chap10.11.html) 抽奖 效果 实例 。 代 码 如 下 ; 
<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="UTF-8"> 

<title>Title</title> 

<style> 

#divl{position:absolute;} 
#div2{position:absolute;left:232px;top:235px;} 

</style> 
</head> 
<body> 
<div id="divl"><img src="imgs/back.jpg" alt=""></div> 
<div id="div2"><img src="imgs/start.png" alt=""></div> 
</body> 
</html> 
<script src: query-3.3.1.js"></script> 
<script src="jQueryRotate.js"></script> 
<script> 

$ (function(){ 











1 Var rotateAngle; 

2. var a=0 

3. $("#div2") .click (function(){ 

4. att? 

5- if(a>3){ 

6 alert (' 你 只 有 3 次 机 会 '); 

7 return; 

8 上 

:网 rotateAngle=Math.random ()*360; 
Ge if (0<rotateAngle<=51.2){ 

请 rotateangle=Math.random()*300+607 
12- 

3 $ (this) .rotate({ 

14. duration:3000, // 旋 转 时 间 3s 
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JavaScript 中 标记 的 jQuery 代码 分 析 如 下 : 

第 1 行 : 定义 一 个 变量 ， 用 于 表示 旋转 的 角度 。 

第 2 行 : 定义 一 个 变量 a=0， 用 于 判断 抽奖 次 数 。 

第 3 一 21 行 : 为 div2 添加 单 击 事件 ， 单 击 div2 开始 抽奖 。 

第 4~8 行 : 限制 抽奖 次 数 ， 当 a>3 时 ， 停 止 对 后 面 代 码 的 执行 。 

第 9 行 : 定义 抽奖 时 旋转 的 随机 角度 rotateAngle， 使 用 Math.random0 方 法 。 

第 10~12 行 : 判断 rotateAngle 是 否 在 0 一 51.2， 如 果 是 ， 重 新 给 rotateAngle 赋值 。 这 样 就 可 以 操控 中 
特等 奖 的 机 会 了 。 

第 13 一 20 行 : 调用 jQueryRotatejs 中 的 rotate() 方 法 ， 让 抽奖 转盘 旋转 。 

第 14 一 16 行 : 设置 旋转 的 一 些 参数 。 

第 17 一 19 行 : 转盘 旋转 完成 后 的 回调 函数 。 第 18 行 调 用 call0 方 法 判断 转盘 指针 所 在 的 奖 区 ， 弹 出 相 
应 的 结果 。 

第 22 一 51 行 : call0 方 法 的 具体 代码 。 
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10.13 “就业 面试 技巧 与 解析 
10.13.1 面试 技巧 与 解析 (一 ) 


面试 官 : 请 问 window.onload0) 函 数 和 $(documenb .ready(function0 他) 方法 有 什么 区 别 ? 
应 聘 者 : 它们 主要 有 3 个 区 别 。 
(1) 执行 时 间 上 : window.onload0 必 须 等 到 页 面 内 所 有 元 素 加 载 到 浏览 器 中 后 才能 执行 。 而 
$(document).ready(function0{}) 是 DOM 结构 加 载 完毕 后 就 会 执行 。 
(2) 编写 个 数 : window.onload0 不 能 同时 写 多 个 ， 如 果 有 多 个 window.onload0， 则 只 有 最 后 一 个 会 执行 ， 
它 会 把 前 面 的 都 覆盖 掉 。$(documenb ready(function0 们 ) 则 不 同 ， 它 可 以 编写 多 个 ， 并 且 每 一 个 都 会 执行 。 
(3) 简写 方法 ，window.onload0 没 有 简写 的 方法 ，$(documenbready(function0 f) 可 以 简写 为 gdfnction0{))。 


10.13.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : 请 问 什 么 是 JQuery 中 的 链 式 操作 方式 ? 

应 聘 者 : jQuery 中 的 链 式 操作 方式 是 最 有 特色 的 功能 之 一 ， 是 指 对 发 生 在 同一 个 jQuery 对 象 上 的 一 
组 行为 ， 直 接连 接 写 ， 而 无 须 重复 获取 对 象 。jQuery 的 链 式 操作 有 助 于 提高 性 能 ， 不 用 去 重复 获取 DOM 
元 素 。 
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< 学习 指引 


AngularJS 作为 目前 最 为 流行 的 前 端 框架 之 一 ， 非 常 受 前 端 开发 者 的 “喜爱 ”。 
AngularJS 是 JavaScript 框架 ， 它 可 通过 <script> 标 签 添加 到 HTML 页 面 中 。AngularJS 是 一 个 比较 完善 
的 前 端 MVC 框架 ， 核 心 内 容 包括 模板 、 数 据 双向 绑 定 、 路 由 、 模 块 化 、 服 务 、 过 滤器 、 依 赖 注入 等 功能 。 


< 人 ”重点 导读 


“掌握 基础 知识 。 

。 掌握 指令 。 
“掌握 过 滤器 。 

* 掌握 表单 验证 。 

“熟悉 服务 。 

。 掌握 模 型 。 

。 掌 握 事件 机 制 。 

。 掌握 数据 存储 。 

。 热 悉 Controller as 语法 和 安全 依赖 注入 方法 。 
"掌握 路 由 。 

。 熟 悉 标 准 项 目 结构 设计 。 


11.1 ”基础 知识 


在 学 习 AngularJS 之 前 , 先 到 官网 下 载 AngularJS 文件 , 本 章 所 有 案例 的 AngularJS 文件 都 是 在 HTML 
文件 同 目录 下 , 不 需要 再 配置 路 径 , 直接 载 入 到 HTML 中 即 可 。 例如 “<script src="angular.js"> </script> ”。 

















SA 
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渴 11.1.1 表达 式 
”AngularJs 和 JavaScript 表达 式 基本 样 ， 包含 字母 、 操 作 符 和 变量 。AngularJS 使 用 表达 式 把 数据 绑 定 
到 HTML 中 。 
语法 如 下 : 





{{expression}} 
AngularJS 将 在 表达 式 书写 的 位 置 输出 数据 。 
【 例 11-1】《〔 实 例文 件 ，ch11\Chap11.1.html》 表 达 式 的 用 法 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 表 达 式 </title> 
</head> 
<body> 
<!--ng-init 指令 创建 了 变量 data, 你 可 以 在 应 用 中 使 用 它 .> 
<div ng-app="" ng-init="data='Hello RngularJS!' "> 
<hl>{{data}}</h1l> 





<p></p> - OO x 
</div> 国 mpyfocaihorw6334 DD -6 | 国 2 
</body> 文件 (站 坊 ( 可 看 V) 次 瑟 失 (A) 工具 Mm。 才 助 (H) 
</html> 罕 





<script src="angular.js"></script> 
相关 的 代码 实例 可 参考 Chap11.1.html 文件 , 在 正 浏 览 器 中 运行 ”| Hello AngularJS! 
的 结果 如 图 11-1 所 示 。 

















用 100% > 


11.1.2 ng-app 指令 图 11-1 表达 式 的 用 法 





ng-app 指令 ， 一 个 HTML 文档 中 最 好 只 出 现 一 次 ， 如 果 出 现 多 次 也 是 只 有 第 一 个 起 作用 。 

ng-app 指令 用 于 告诉 AngularJS 当前 这 个 元 素 是 根 元 素 ， 它 标记 了 AngularJS 的 作用 。ng-app 可 以 添加 
在 HTML 文档 中 的 任何 一 个 元 素 中 ， 如 果 添 加 到 HTML 标签 上 ， 说 明 AngularJS 对 整个 页 面 都 起 作用 。 也 
可 以 在 局 部 元 素 中 添加 ng-app 指令 ， 比 如 在 某 一 个 div 内 添加 ng-app， 则 表明 接 下 来 的 整个 div 区 域 使 用 
AngularJS 解析 ， 而 其 他 位 置 元 素 则 不 使 用 AngularJS 解析 。 

ng-app 的 值 可 以 为 空 ， 也 可 以 赋值 ， 代 码 如 下 : 

<html ng-app=" "> // 为 空 

<html ng-app="app"> // 赋 值 

但 是 ， 赋 值 时 必须 在 JavaScript 脚本 里 声明 ， 否 则 无 法 解析 app， 代 码 如 下 : 

<script> 


angular.module ("app", []);// 声 明 app 
</script> 


.1.3 ”模块 


我 们 可 以 把 一 个 应 用 程序 分 割 成 不 同 的 模块 ， 每 一 个 模块 里 都 可 以 包括 控制 器 、 服 务 、 过 滤器 、 指 令 
等 。 在 开发 大 型 的 应 用 程序 时 ， 可 以 按照 不 同 的 功能 去 设置 不 同 的 模块 。 

我 们 可 以 通过 angular module() 方 法 来 创建 模块 和 获取 模块 。 

angularmodule() 方 法 有 3 个 参数 ， 例 如 : 
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angular.module (name, requires, configFn); 
。 name: 表示 模块 的 名 称 。 
。 requires: 是 一 个 数组 ， 表 示 本 模块 所 依赖 的 模块 。 如果 新 模块 没有 依赖 关系 ， 那 么 必须 设置 该 参数 





为 空 数组 []。 
。 configFn: 是 一 种 方法 或 一 个 数组 ， 负 责 模块 初始 化 时 做 一 些 配 置 。 
1. 创建 模块 


创建 模块 ， 其 实 就 是 angularmodule( 方 法 存在 第 二 个 参数 requires， 当 requires 里 没有 依赖 的 模块 时 ， 
也 必须 加 上 []。 代 码 如 下 : 

<div ng-app="myApp"></div> 

<script> 


Var app=angular.module('myApp', []); 
</script> 


这 样 就 创建 了 模块 App，myApp 对 应 执行 的 HTML 元 素 。 


2. 获取 模块 
获取 模块 时 ， 只 需 向 angularmodule() 方 法 中 传 入 name 人 参数， 代码 如 下 : 


<script> 
Var App=angular.module('myApp'); 
</script> 


如 果 模 块 myApp 没有 定义 ， 那 么 浏览 器 会 提示 错误 。 
11.1.4 ”作用 域 


$scope 是 一 个 对 象 ， 当 在 AngularJS 中 创建 控制 器 时 ， 可 以 将 $scope 对 象 当 作 一 个 参数 传递 进去 ， 它 
包括 可 用 的 方法 和 属性 。 当 在 控制 器 中 添加 $scope 对 象 时 ，HTML 可 以 获取 这 些 方法 和 属性 。 在 HTML 中 
不 需要 添加 $scope 前 级 ， 只 需要 在 表达 式 中 添加 属性 名 即 可 ， 如 { {name}}。 

所 有 的 应 用 都 有 一 个 根 作用 域 ($rootScope)， 它 可 以 作用 在 ng-app 指令 包含 的 所 有 HTML 元 素 中 。 
$rootScope 是 所 有 控制 器 中 $scope 的 桥梁 ， 用 它 定义 的 属性 ， 可 以 在 所 有 控制 器 中 使 用 。 在 其 他 控制 器 中 
可 以 通过 $rootScope.X 获取 到 ，X 代表 属性 。 创 建 控制 器 时 ， 将 $rootScope 作为 参数 传递 进去 ， 就 可 以 在 应 
用 中 使 用 它 了 。 

【 例 11-2】“〈 实 例文 件 ，chll\Chap11.2.html) 根 作 用 域 实例 。 代 码 如 下 ; 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 作 用 域 scope</title> 
<style> 
div{width:100px;height:100px;float:left;} 
</style> 
</head> 
<body ng-app="myApp"> 
<div ng-controller="conl"> 
<h3>{ {result}}</h3> 
<p ng-repeat=" (key,value) in namel">{{key}}:{{value}}</p> 
</div> 
<div ng-controller="con2"> 
<h3>{{result}}</h3> 
































<p ng-repeat=" (key,value) in name2">{{key}}:{{value}}</p> 
</div> 
<div ng-controller="con3"> 
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<h3>{ {result}}</h3> 
<p ng-repeat=" (key,value) in name3">{{key}}:{{value}}</p> 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
var app=angular.module('myApp', []); 
app.controller('conl',function($scope){ 
$scope.namel={name:" 小 明 ", score:"80"}; 
ys 
// 在 控制 器 con2 中 定义 了 根 作用 域 SrootScope 
app.controller('con2',function($scope, $rootScope){ 
$scope.name2={name:" 小 红 ", score:"75"}; 
$rootScope .result=" 得 分 结果 "; 
hr 
app.controller('con3',function($scope) { 
$scope.name3={name:" 小 华 ", score:"88"}; 





- 9 




















er ls 
在 上 面 的 代码 中 ， 我 们 只 在 con2 中 设置 了 result 属性 ， 在 conl 
和 con2 中 都 可 以 通过 $rootScope.result 获取 。 分 结果 ”得 分 结果 。 得 分 结 3 
相关 的 代码 实例 可 参考 Chap11.2.html 文件 ， 在 正 浏览 器 中 运行 | name: 小 有 。 name: 小 红 。 name: 小 华 
的 结果 如 图 11-2 所 示 。 score:80 score:75 score:88 
昌 11.1.5 “控制 器 11-2， 根 作用 域 的 实例 





Controller 用 于 定义 应 用 程序 控制 器 ， 基 本 上 用 AngularJS 就 会 用 到 Controller。Controller 是 JavaScript 
的 一 个 构造 函数 ， 有 两 个 作用 ， 分 别 是 初始 化 $scope 和 增加 方法 。 
我 们 可 以 使 用 控制 器 给 HTML 提供 需要 显示 的 数据 ， 这 些 数据 可 以 来 自 应 用 程序 的 后 合 数据库。 
语法 如 下 : 
app.controller('name',function(){}) 
其 中 ， 第 一 个 参数 name 是 该 控制 器 的 名 称 ， 第 二 个 参数 是 控制 器 的 行为 、 方 法 和 属性 。 
【 例 11-3】〔 实 例文 件 ，ch11\Chap11.3.html》 创 建 控制 器 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>controller</title> 
</head> 
<body> 
<div ng-app="myApp" ng-controller="con"> 
<p> 语 文 :{{language}}</p> 
<p> 数 学 : { {geometry}}</p> 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
var app=angular.module('myApp', []); 
app.controller('con',function($scope){ 
$scope.language="80"; 
$scope.geometry="90" 





1D) 
</script> 
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在 上 面 的 代码 中 ， 我 们 定义 了 一 个 控制 器 ， 它 初始 化 了 一 个 $scope 
对 象 , 并 且 有 language 和 geometry 两 个 属性 。 当 我 们 把 该 控制 器 关联 到 
div 节点 上 ， 模 板 就 可 以 通过 数据 绑 定 来 读 取 它 。 

相关 的 代码 实例 可 参考 Chap11.3.html 文件 ， 在 正 浏览 器 中 运行 的 
结果 如 图 11-3 所 示 。 


























11.1.6 $apply 与 $watch 


$apply 与 $watch 这 两 个 对 象 都 依赖 于 $scope 对 象 ，$apply 用 来 传播 model 的 变化 ， 而 $watch 用 
监听 model 的 变化 。 这 与 AngularJS 中 的 双向 数据 绑 定 有 很 大 关系 。 下 面 介绍 这 两 个 对 象 的 基本 用 法 。 









































1. $apply() 

单独 调用 $apply0 方 法 的 情况 非常 少 , 基本 上 所 有 的 代码 都 包含 在 $scope.$apply0 里 面 , 如 ng-click、 
Controller 的 初始 化 和 http 的 回调 函数 等 ， 在 这 些 情况 下 ， 不 需要 单独 调用 。 

当 把 不 是 由 AngularJS 触发 的 数据 模型 的 改变 引入 AngularJS 的 控制 范围 内 〈 如 控制 器 、 服 务 、AngularJS 
事件 处 理 器 等 ) 时 ， 必 须 单独 调用 $apply( 方 法 。 

例如 ， 当 使 用 setTimeout0 函 数 来 更 新 一 个 数据 模型 时 ，AngularJS 就 没 办 法 知道 是 否 改变 了 数据 模型 。 
这 种 情况 ， 就 得 单独 调用 $apply0 方 法 。 

【 例 11-4】 《实例 文件 :chll\Chap11.4.html) $apply0 的 用 法 。 代 码 如 下 : 


<!doctype html> 
<html ng-app="myApp"> 
<head> 
<meta charset="utf-8"> 
<title>$apply</title> 
</head> 
<body> 
<div ng-controller="con"> 
{{name}} {{age}} 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
var app=angular.module ("myApp", []); 
app.controller("con", function($scope){ 
$scope.name=" 管 爷 "; 
$scope.age="65 岁 "; 
setTimeout (function(){ 
$scope.$apply (function(){ 
$scope .name=" 奶 奶 "; 
$scope.age="63 岁 "; 
Ds 
},3000); 


















































Py 
</script> 


相关 的 代码 实例 可 参考 Chap11.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-4 所 示 ; 页 面 上 的 
name 和 age 在 3s 后 就 会 改变 ， 如 图 11-5 所 示 ， 这 就 是 $apply0 的 作用 。 
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国 hap/hocalhostsi3s 万 站 hep//ocalhost6334; D | 下， 
立 |#( 有 少壮 (日 ” 理 吾 (V) 。 归 厨 夫 ( 凡 工具 (大 动 (H) 文 /有 兰 加 ( 日 ” 坦 香 [V) 站 赢 六 (A) 工具 (T) 帮助 (H) 
入 加 
和 爷 条 65 岁 奶奶 63 岁 
人 130% ~ 130% ~ 
图 11-4 页面 加 载 完成 时 11-5 ”页 面 加 载 完成 3s 后 
2. $watch() 
AngularJS 内 部 的 $watch 实现 了 页 面 随 model 的 及 时 更 新 。$watch() 方 法 主 于 手动 监听 一 个 对 象 ， 
对 象 发 生变 化 时 触发 某 个 事件 。 
语法 如 下 : 
Swatch (a,b,c); 
其 中 


。 a: AngularJS 的 表达 式 或 函数 的 字符 串 。 
。 b: 函数 ，a 发 生变 化 时 被 调用 。 





。 c: 布尔 值 ， 表 示 是 否 深度 监听 ， 如 果 设 置 为 tue， 它 告诉 AngularJS 检查 所 监控 的 对 象 中 每 一 个 属 


性 的 变化 。 
例如 下 面 的 案例 ， 监 听 一 个 model， 当 model 每 次 改变 时 都 会 触发 第 二 个 函数 。 
【 例 11-5】 “实例 文件 ， chll\Chap11.5.html) $watchO 的 用 法 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>$watch</title> 
</head> 
<body> 
<div ng-app="myApp"> 
<div ng-controller="con"> 
<input type="text" ng-model="value"/> 
<!--<input type="text" ng-model="object.value"/>--> 
改变 次 数 : { {count-1}} 
</div> 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
var app=angular.module ("myApp", []); 
app.controller ("con", function($scope){ 
$scope.value="''; 
$scope.count=0; 
// 监 听 一 个 model, 当 一 个 model 每 次 改变 时 ,都 会 触发 第 2 个 函数 
$scope. Swatch('value', function(){ 
++$scope.count; 
if($scope.count>10){ 
alert(' 已 经 大 于 10 次 7 了 ') 
. 
1D; 
Ds 
</script> 








相关 的 代码 实例 可 参考 Chap11.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-6 所 示 ; 当 在 input 
中 输入 次 数 大 于 10 次 时 ， 会 提示 “已 经 大 于 10 次 了 ”， 在 正 浏 览 器 中 运行 的 结果 如 图 11-7 所 示 。 
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http://localhost:6 
编辑 (E) ”前 看 (V) ”收藏 夫 (A) ” 工 只 中 
变 次 数 :0 




















图 11-6 ”S$watch() 的 用 法 
当 要 监听 一 个 对 象 或 者 数组 时 ， 需 要 使 用 $wat 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>$watch</title> 
</head> 
<body> 
<div ng-app="myApp"> 
<div ng-controller="con"> 
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图 11-7 S$watch() 的 用 法 
ch() 的 第 三 个 参数 。 代 码 如 下 : 





<input type="text" ng-model="value"/> 
<!--<input type="text" ng-model="object.value"/>--> 


改变 次 数 : { {count-1}} 
</div> 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
Var app=angular.module ("myApp", []); 
app.controller ("con", function($scope){ 
// 监 听 对 象 object 
$scope.object={ 
Value:' 
ys; 
$scope.count=0; 
$scope. $watch ("object", function(){ 
$scope.count++; 
if($scope.count>10){ 
alert ("已 经 大 于 10 次 了 "); 
} 
}vtrue) // 加 Swatch() 第 三 个 参数 true 
i 
</script> 


如 果 不 加 第 三 个 参数 tue， 会 发 现 不 管 object 时 





11.2 


bl 





。 组 件 指令 : 可 以 帮 我 们 调用 组 件 里 的 模板 、 





里 的 内 容 如 何 改变 ， 也 没有 触发 第 二 个 函数 。 


指令 


不 同 的 指令 (ng-repeat，ng-class，ng-show，ng-hide) 具备 不 同 的 功能 ， 可 以 完成 不 同 的 任务 , 在 AngularJS 


和 有 3 种 类 型 的 指令 ， 分 别 是 组 件 指令 、 属 性 指令 和 结构 指令 。 


样式 。 
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。 属性 指令 : 改变 当前 DOM 结构 中 的 属性 、 样 式 。 例 如 : ng-class=" 类 名 "， 会 改变 元 素 标签 里 的 
样式 。 


。 结构 指令 : 可 以 改变 当前 DOM 元 素 的 结构 。 例 如 : ng-show=" 表 达 式 "， 就 是 在 某 种 条 件 下 ， 元 素 
可 以 展示 出 来 。 


kx 11.2.1 ng-repeat 


ng-repeat 指令 用 于 循环 遍历 数组 或 者 对 象 。 
语法 如 下 : 





。 遍历 数组 时 :expression=i in array。 

。 遍历 对 象 时 :expression=(key,value) in object。 

注意 : 遍历 数组 时 ， 如 果 数 据 中 出 现 重复 的 数据 时 ， 浏 览 器 会 提示 错误 ， 这 时 需要 在 遍历 数组 表达 式 
后 面 加 上 一 句 track by $index 代码 ， 代 码 如 下 : 


【 例 11-6】 实例 文件 ，ch11\Chap11.6.html》〉ng-repeat 的 用 法 。 代 码 如 下 : 
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] 
Ds 





</script> 
、 ep © 合 |@ locahost63342/an... 女 | 让 
相关 的 代码 实例 可 参考 Chap11.6.html 文件 ， 在 正 浏览 器 中 运行 
Inameldass kscore 
的 结果 如 图 11-8 所 示 。 忆 明 上 E 年 公 (2) 班 |b5 分 











11.2.2 ng-class 
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"class"”:" 三 年 级 (2) 班 "， 


"score":"92 分 " 





8 = 看 ”六 
国 nerepeee x 























由 红 | 三 年 级 (2) 班 98 分 
地 举 |E 年 级 (2) 班 92 分 












































11-8 ng-repeat 的 用 法 











ng-class 指令 用 于 给 HTML 元 素 动态 绑 定 一 个 或 多 个 CSS 类 。 


语法 如 下 : 








<element ng-class="expression"></element> 


ng-class 指令 的 值 可 以 是 字符 串 、 对 象 ， 或 一 个 数组 。 如 果 是 字符 串 ， 多 个 类 名 使 用 空格 分 隔 。 如 果 是 











对 象 ， 需 要 使 























key-value 对 ，key 为 你 想 要 添加 的 类 名 ，value 是 一 个 布尔 值 ， 在 value 为 tue 时 ， 类 才 会 





被 添加 。 如 果 是 数组 ， 可 以 由 字符 串 或 对 象 组 合 组 成 ， 数 组 的 元 素 可 以 是 字符 串 或 对 象 。 


【 例 11-7】 











(实例 文件 ，ch11\Chap11.7.html)〉ng-class 的 用 法 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 


<head> 


<meta charset="UTF-8"> 
<title>ng-class</title> 


<style> 


.blue{color:blue;} 
.border{border:lpx solid red;} 
</style> 


</head> 


<body ng-app="myApp" ng-controller="con"> 
<p ng-class="classl"> 指 令 的 值 是 字符 串 </p> 
<p ng-class="class2"> 指 令 的 值 是 数组 </p> 

<p ng-class="class3"> 指 令 的 值 是 对 象 </p> 


</body> 
</html> 


<script src="angular.js"></script> 


<script> 


var app=angular.module ("myApp", []); 
app.controller('con',function($scope){ 


$scope.classl="blue border", // 指 令 的 值 是 字符 串 
$scope.class3=['blue', 'border'], 7/ 指令 的 值 是 数组 
$scope.class2={'blue':true, 'border':true} /1 指令 的 值 是 对 象 


}) 











</script> 
相关 的 代码 实例 可 参考 Chap11.7.html 文件 ,在 正 浏览 -一 一。 
器 中 运行 的 结果 如 图 11-9 所 示 。 0 四 
我 们 为 p 元 素 添加 类 分 别 使 用 字符 串 、 数 组 和 对 象 ,可 以 ”| 9 EY Wx IRm 和 
看 出 都 可 以 实现 ， 在 实际 运用 中 可 以 根据 需要 来 选择 。 ET ^ 
脂 信 的 值 妊 数 班 
11.2.3 ng-show 和 ng-hide CE md 


在 页 面 中 有 些 元 素 可 能 希望 在 特定 的 条 件 下 显示 或 隐 













































































11-9 ng-class 的 用 法 
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藏 ， 我 们 可 以 根据 不 同 的 情况 来 使 用 ng-show 和 ng-hide。 
ng-show 指令 在 表达 式 为 tue 时 显示 指定 的 HTML 元 素 ， 为 false 时 隐藏 元 素 。ng-hide 指令 在 表达 式 
为 tue 时 隐藏 HTML 元 素 ， 为 false 时 显示 元 素 ， 两 者 刚好 相反 。 


语法 如 下 : 


xelement ng-show="expression"></element> 
<element ng-hide="expression"></element> 


注意 : ng-hide 还 可 以 作为 CSS 类 来 用 ， 效 果 是 隐藏 元 素 ， 其 代码 如 下 : 


<element class="ng-hide"></element> 


【 例 11-8】〔 实 例文 件 ，ch11\Chap11.8.html》ng-show 和 ng-hide 的 用 法 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>ng-show 和 ng-hide</title> 

</head> 

<body ng-app=""> 

<div style="border:lpx solid red"> 


<p> 显 示 HTML:<input type="checkbox" ng-model="show"></p> 


<div ng-show="show"> 
<h3>ng-show 显示 效果 </h3> 
</div> 
</div> 
<div style="border:lpx solid red"> 


<p> 隐 藏 HTML:<input type="checkbox" ng-model="hide"></p> 


<div ng-hide="hide"> 
<h3>ng-hide 隐藏 效果 </h3> 
</div> 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 


在 上 面 











勾 选 复 选 框 ， 表 示 值 为 tue。 
相关 的 代码 实例 可 参考 Chap11.8.html 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 11-10 所 示 ; 当 勾 选 复 选 杠 


时 ， 
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在 下 浏览 器 中 运行 的 结果 如 图 11-11 所 示 。 
= 口 x 
hmpyllocalhost6335 及 - | 国 ng-showfnng-hide 
划 示 HTML: 口 
隐藏 HTML: 口 
ng-hide 隐 藏 效果 
或 100%6 











图 11-10 复 选 框 值 为 false 时 


11.3 





的 代码 中 , checkbox 的 值 为 tue 或 false, 可 以 使 用 ng-model 指令 绑 定 , 它 的 值 可 以 








用 于 应 





用 中 ， 





























一 口 x 
国 Nupyfiocalhostc334 P - | 国 ng-showfnng-hide 
司 示 HTML: 区 
ng-show 显 示 效 果 
隐藏 HTML: 区 
100% ~ 
11-11 复 选 框 值 为 true 时 














过 滤器 (filter) 正如 其 名 ， 作 用 就 是 接收 


个 输入 ， 通 过 某 个 规则 进行 处 理 ， 然 后 返 





六 
由 
Tm 
全 
洲 
站 
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它 主要 用 在 数据 的 格式 化 上 ， 例 如 获取 一 个 数组 中 的 子 集 ， 对 数组 中 的 元 素 进行 排序 等 。AngularJS 内 置 了 
一 些 过 滤器 ， 它 们 是 : currency (货币 )、date (日 期 )、filter ( 子 串 匹 配 )、json (格式 化 json 对 象 )、limitTo 
(限制 个 数 )、lowercase (小 写 )、uppercase (大 写 )、number (数字 )、orderBy (排序 ) 共 9 种 。 除 此 之 外 
还 可 以 自 定义 功能 强大 的 过 滤器 ， 用 来 满足 任何 要 求 的 数据 处 理 。 



































11.3.1 date 过 滤器 


data 过 滤器 可 以 把 日 期 类 型 的 数据 转换 为 想 要 的 格式 类 型 。 
原生 的 JavaScript 对 日 期 的 格式 化 能 力 有 限 ，AngularJS 提供 的 date 过 滤器 基本 可 以 满足 一 般 的 格式 化 
语法 如 下 : 
{{dateldate:'yyyy-MM-dd hh:mm:ss'}} 
其 中 ，yyyy-MM-dd hh:mm:ss 分 别 代 表 年 -月 -日 -时 -分 - 秒 ， 可 以 自由 组 合 其 中 的 参数 。 
【 例 11-9】“《 实 例文 件 ，ch11\Chap11.9.html〉》data 过 滤器 实例 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>date 过 滤器 </title> 
</head> 
<body> 
<div ng-app="myApp" ng-controller="con"> 
<p>{{ todayldate:"yyyy-MM-dd hh:mm:ss"}}</p> 
<p> 年 :{{ todayldate:"yyyy"}}</p> 
<p> 月 :{{ todayldate:"MM"}}</p> 
<p> 日 :{{ todayldate:"dd"}}</p> 


























<p> 时 :{{ todayldate:"hh"}}</p> -0o x 
<p> 分 :{{ todayldate:"mm"}}</p> 国 Menfiocalhot633t P= © | acon x*[E 
<p> 秒 : {{ todayldate:"ss"}}</p> 文件 (月 纺 锅 (F) 。 吾 夏 (V) 收藏 实 (A) 工具 (T) 者 助 IH) 
</div> 究 
人 2018-04-30 04:0639 A 
<script src="angular.js"></script> 年 ，2018 
<script> 月 , 04 
var app=angular.module('myApp', []) 
app.controller('con', function($scope) { 日. 
$scope.today=new Date() 时 : 04 
人 分 , 06 
</script> 局 
了 b, 39 
相关 的 代码 实例 可 参考 Chap11.9.html 文件 , 在 正 浏览 器 CT 
中 运行 的 结果 如 图 11-12 所 示 。 图 11-12 data 过 滤器 实例 











11.3.2 limitTo 过 滤器 


limitTo 过 滤器 可 以 限制 一 个 字符 串 显示 的 字符 数 ， 也 可 以 限制 一 个 数组 显示 的 项 目 数 。 
limitTo 过 滤器 用 来 截取 数组 或 字符 串 ， 接 收 一 个 参数 用 来 指定 截取 的 长 度 ， 如 果 参 数 是 负 值 ， 则 从 数 
部 开始 截取 。limitTo 过 滤器 只 能 从 数组 或 字符 串 的 开头 /尾部 进行 截取 。 

语法 如 下 : 

{{ 字 符 串 或 数组 11imitTo:name}}// 将 会 从 字符 串 或 数组 中 截取 name 个 字符 或 者 项 


















































让 
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【 例 11-10】 实例 文件 ，ch11\Chap11.10.html》limitTo 过 滤器 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>limitTo 过 滤器 </title> 

</head> 

<body> 

<div ng-app=""> 


<p>{{["a","q","e","y"] llimitTo:3}}</p> 


<p>{{"angular.js"|limitTo:3}}</p> 


<p>{{["a","q","e", "y"] |limitTo:-3}}</p> 


<p>{{"angular.js"|limitTo:-3}}</p> 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 


相关 的 代码 实例 可 参考 Chap11.10.html 文件 ， 在 下 浏览 器 


中 运行 的 结果 如 图 11-13 所 示 。 











国 ; x 加 
11.3.3 filter 过 滤器 
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想 要 在 一 个 数组 里 面 找到 某 个 特定 的 项 目 ， 可 以 使 用 filter 过 滤器 。 


【 例 11-11】 实例 文件 ，ch11\Chap11.11.html》filter 过 滤器 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>filter 过 滤器 </title> 
</head> 
<body> 


<div ng-app="myApp" ng-controller="con"> 


<p> 输 入 想 查 找 的 :<input type="text" ng-model="data"></p> 


<ul> 


<1i ng-repeat="i in datas|filter:data"> 


{{(i.nameluppercase)+ ', 
</1i> 
</ul> 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
var app=angular.module('myApp', 
app.controller('con', function($ 
$scope.datas=[ 
{name:' 小 明 ', score:'90 分 '} 
{name:' 小 红 ', score:'95 分 '} 
{name: ' 小 华 ', score:'85 分 '} 
hy 
Ds 
</script> 


相关 的 代码 实例 可 参考 Chap11.11.html 文件 ， 在 正 浏览 器 








'+i.score}} 


[]) 


scope) { 


四 








运行 的 结果 如 图 11-14 所 示 。 
当 在 表单 中 输入 想 要 查找 的 数组 项 目 时 ， 会 过 滤 掉 不 满足 条 件 的 项 目 ， 如 图 11-15 所 示 。 











= 
国 pepecalhest6334 记 -C| 国 imitadid 妇 

诡 件 {站 妨 和 由。 二 看 V) 收 训 关 A 工具 部 助 H) 

富 

Ca",q"we"] ~ 
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Cae""y"] 

i | 

R100% 7 

11-13 limitTo 过 滤器 实例 
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二 | 蚌 ”: 茂 一 说 x 
国 hpi/localhost6334. 记 -属国 fiterzi 和 httpy/localhost6334. 用 ”CC | 国 fiter 洁 器 
文件 由 ”篇 霹 (E) 坦 看 (V) 收 襄 夫 (A) 工具 (D 帮助 (H) 文件 (月 ”六 等 (E) 坦 看 (V) 收 苇 去 (A) ”工具 (D 帮助 (H) 
窒 会 
输入 想 查找 的 ， 输入 想 查找 的 : 攻 x 
。 小 明 , 90 分 。 小 红 ,95 分 
小 红 ,95 分 
“小 华 , 85 分 
成 100% ~ 转 100% ~ 
图 11-14 ”页面 加 载 完成 时 图 11-15 filter 过 滤 后 的 页 面 


11.4 ”表单 验证 


ngModelController 是 ng-model 指令 中 所 定义 的 一 个 特殊 控制 器 .这 个 控制 器 包含 了 一 些 用 于 数据 绑 定 、 
验证 、CSS 更 新 ， 以 及 数值 格式 化 和 解析 的 服务 。 它 不 用 于 进行 DOM 泻 染 或 者 监听 DOM 事件 。 表单 验证 
是 与 用 户 交互 的 一 个 重要 部 分 ， 在 AngularJS 中 ， 实 现 也 是 比较 简单 的 ， 而 且 易 于 维护 。 



































11.4.1 ngModelController 


ngModel 提供 了 数据 绑 定 、 样 式 更 新 、 验 证 、 数 据 格式 化 、 编 译 功能 等 ， 但 是 它 并 没有 提供 和 逻辑 相 
关 的 处 理 , 如 视图 的 重新 泻 染 和 监听 dom 事件 , 这 些 和 逻辑 处 理 相关 的 dom, 就 应 该 使 用 ngModelController 
来 进行 数据 绑 定 。ngModelController 是 ng-model 指令 中 所 定义 的 Controller。 在 自 定义 指令 中 ， 我 们 通过 
require 参数 直接 引用 ， 这 样 就 可 以 在 link 函数 中 使 用 它 去 实现 一 些 功能 了 。 

假设 我 们 在 变量 中 要 保存 一 个 列表 的 类 型 ， 但 是 显示 的 内 容 只 能 是 字符 串 ， 所 以 这 两 者 之 间 需 要 一 个 
转换 。 


【 例 11-12】 “实例 文件 ， chll\Chap11.12.html) ngModelController 的 用 法 。 代 码 如 下 : 


<!DOCTYPE html> 
<html ng-app="app"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body ng-controller="con"> 
<p><input type="text" ng-model="newName"/><button ng-click="change () "> 转换 大 写 </button></p> 
<p><input type="text" ng-model="name" custom/></p> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
var app=angular.module('app', []); 
app.controller('con', function($scope){ 
$scope.name=' 大 写字 母 '; 
$scope.change=function(){ 
$scope.name=$scope .newName; 
} 
Ds 
app.directive('custom',function(){ 
return{ 
restrict:'A', 
require:'ngModel', 
link:function (scope,ele,attrs,ctrl){ 
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RN 

ctr1.5formatters.push (function (value) { 
value=value.toUpperCase (); 
return value; 

Ds 

; 
]) 
</script> 





在 上 面 的 代码 中 自 定义 了 custom 指令 ,require 参数 指定 ngModel, 又 因为 DOM 结构 中 ng-model 是 存 
在 的 ， 所 以 link 函数 中 就 可 以 获取 一 个 NgModelController 的 实例 ， 即 代码 中 的 ctl。 此 外 还 添加 了 需要 的 
$formatters 属性 ， 在 model 被 程序 改变 时 调用 它 。 

相关 的 代码 实例 可 参考 Chap11.12.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-16 所 示 ; 当 在 第 一 个 
文本 框 中 输入 字母 时 ， 单 击 “ 转 换 大 写 ” 按 钮 会 把 第 一 个 文本 框 中 的 字母 转换 成 大 写字 母 ， 显 示 在 第 二 个 
文本 框 中 ， 如 图 11-17 所 示 。 
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国 httpy/localhost6334. Dv | 园 NeModelcontroller| 图 http//localhost6334. -0 网 NaModelcontroller| 
文件 (六 忽 日 。 瘟 看 WV) 上 而 夫 (A) 工具 [帮助 (H) 文件 ( 朋 ”六 统 ， 豆 看 (V) 。 皮 而 夫 (A) 工具 Tm 帮助 (H) 
2 2 
abcdef 转换 大 写 
ABCDEFG 
甩 115% 
11-16 页面 加 载 完成 效果 11-17 单 击 “ 转 换 大 写 ” 按 钮 显示 效果 


11.4.2 ”表单 验证 


表单 验证 是 AngularJS 一 项 重要 的 功能 , 能 保证 Web 应 用 不 会 被 恶意 或 错误 地 输入 影响 。AngularJS 表 
单 验证 提供 了 很 多 表单 验证 指令 ， 并 且 能 将 HTML 5 表单 验证 功能 同 它 自己 的 验证 指令 结合 起 来 使 用 ， 进 
而 在 客户 端 验 证 时 提供 表单 状态 的 实时 反馈 。 
要 使 用 表单 验证 ,首先 要 保证 表单 有 一 个 name 属性 ， 一 般 的 输入 字段 如 最 大 、 最 小 长 度 等 ， 这 些 功能 
由 HTML 5 表单 属性 提供 。 如 果 想 屏蔽 浏览 器 对 表单 的 验证 行为 ， 可 以 在 表单 元 素 中 添加 novalidate 属性 ， 
novalidate 属性 规定 当 提交 表单 时 不 对 其 进行 验证 。 
【 例 11-13】 实例 文件 ，ch11\Chap11.13.html〉 表 单 验证 实例 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ng-model 验证 表单 </title> 
</head> 
<body> 
<form ng-app="" name="Form"> 
URL: 
<input type="url" name="Address" ng-model="textl1"> 
<span ng-show="Form.Address.S$error.url"> 不 是 一 个 合法 的 URL 地 址 </span><br><br> 
ee type="url" name="Addressl" ng-model="text2"> 
<span ng-show="Form.Addressl.$error.url"> 不 是 一 个 合法 的 URL 地 址 </span> 
</form> 
<p> 在 输入 框 中 输入 网 址 , 如 果 不 是 一 个 正确 的 网 址 ,会 弹出 提示 信息 .</p> 
</body> 
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</html> 


<script src="angular.js"></script> 


相关 的 代码 实例 可 参考 Chap11.13 html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 











= 及 
国 hepyfiocshos3342 记 - | 国 rgmodeaEs x © 

i Sl EV) wa TEM Pho 

器 

URL: [www.baidu.com 不 是 一 个 合法 的 URL 地 址 











URL: [httpywww baidu com 





在 输入 杠 中 输入 网 址 ， 如 果 不 是 一 个 正确 的 网 址 ， 会 弹 


出 提示 信息 。 





11-18 ”表单 验证 


11.5 ”服务 
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11-18 所 示 。 


服务 ( 自 定义 服务 、AngularJs 提供 的 服务 ，$log,$timeout,$q,$http〉 的 作用 就 是 为 应 用 里 其 他 的 组 件 提 
供 可 以 重复 使 用 的 功能 ， 这 里 说 的 组 件 就 是 AngularJS 的 组 成 部 分 包括 指令 、 控 制 器 等 。AngularJS 自 带 了 





许多 服务 ， 本 节 我 们 会 选择 几 种 进行 详细 介绍 。 当 然 我 们 也 可 以 根据 自己 的 需要 来 自 定义 服务 。 


11.5.1 自 定 义 服务 





创建 自 定义 服务 的 方法 有 几 种 ， 如 factory、service、provider 等 。 本 节 介 绍 用 service 方法 创建 一 个 服务 。 


【 例 11-14】 〈 实 例文 件 : chll\Chap11.14.html) 自 定义 服务 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title> 自 定义 服务 </title> 


</head> 
<body> 


<div ng-app="myApp" ng-controller="con"> 
<p> 自 定义 服务 , 用 于 检测 数据 类 型 </p> 
<p><b>123456</b> 的 数据 类 型 是 : { {hex}}</p> 


</div> 
</body> 
</html> 


<script src="angular.js"></script> 


<script> 


var app=angular.module('myApp', []); 
app.service('Service',function(){ 
this.myFunc=function (x){ 
return typeof (x); 


1 
Ds 


app.controller('con', function($scope,Service) { 
$scope.hex=Service.myFunc (123456); 


]) 
</script> 





相关 的 代码 实例 可 参考 Chap11.14.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 











11-19 所 示 。 
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一 wv x 
ccalhost5334 DC| 国 Sx5s 
文件 (| 沁 加 个。 二 硬 V) 收 天 A) 工具 (Tm 大 了 
窜 


自 定义 服务 ， 用 于 检测 数据 类 型 


123456 的 数据 类 型 是 : number 








息 150% > 





图 11-19 自 定义 服务 
在 上 面 的 代码 中 ， 我 们 创建 了 一 个 查询 数据 类 型 的 服务 ， 在 控制 器 中 调用 ， 传 入 数字 123456， 在 页 面 
中 就 会 显示 123456 的 数据 类 型 为 number。 


办 11.5.2 ”AngularJS 提供 的 服务 


在 AngularJS 中 ， 服 务 是 一 个 比较 重要 的 部 分 ， 它 是 一 个 对 象 或 者 函数 ， 可 以 在 AngularJs 的 应 用 中 使 
。 接 下 来 介绍 几 种 AngularJS 提供 的 常用 服务 。 














到 
上 














1. $log 
在 调试 应 用 程序 时 ，$log 可 用 于 在 控制 台 打印 一 些 有 用 的 信息 。 
【 例 11-15】〔 实 例文 件 ，ch11\Chap11.15.html》$log 的 服务 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
<head> 
<meta charset="UTF-8"> 
<title>51og</title> 
</head> 
<body> 
<p ng-controller="con"></p> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
var app=angular.module('myApp', []); 
app.controller('con', ['$lo0g', function ($lo0g) { 
$10g.1og(' 打 印信 息 '); 
$1og.info(' 普 通信 息 '); 
































， ， 本 
$log.warn(' 警 告 信息 '); 门下 二 二 
$1og .error (' 错 误 信 息 '); Slog.htnl 
J A hmtase6: 标记 不 符合 要 求 。 


Slog-htnl (11,1) 


</script> 
相关 的 代码 实例 可 参考 Chap11.15.html 文件 ， 在 正 浏览 
器 中 运行 的 结果 如 图 11-20 所 示 。 











2. $timeout 

$timeout 服务 和 JavaScript 中 setTimeout 一 样 ， 它 可 以 让 11-20 ”$log 的 服务 
我 们 在 指定 的 时 间 过 后 来 执行 一 些 行为 。 

【 例 11-16】 实例 文件 ，ch11\Chap11.16.html》$timeout 服务 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
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<meta charset="utf-8"> 
<title>$timeout</title> 
</head> 
<body> 
<div ng-app="myApp”" ng-controller="con"> 
<P> 两 秒 后 显示 问题 的 答案 :</P> 
<p>{ {datas}}</p> 
<p>{ {datas1}}</p> 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
var app=angular.module('myApp', []); 
app.controller('con', function ($scope, $timeout){ 
$scope.datas=" 你 是 谁 2"; 
$scope.datasl=""; 
$timeout (function(){ 
$scope.datasl=" 我 是 小 明 呀 "; 
}, 2000); 
Ds 
</script> 


相关 的 代码 实例 可 参考 Chap11.16.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-21 所 示 ， 当 页 面 加 载 
完成 2s 后 ,“ 我 是 小 明 呀 ”就 会 被 泻 染 到 页 面 中 ， 如 图 11-22 所 示 。 











国 hepWecahes6aid D- 0 | 国 Simeont 国 RepWecaheseait D - © | $timeout 
文件 (| 病 曝 日。 二 看 (V)。 尿 环 关 (A) 工具 [帮助 H) 文件 由。 顽 缠 下 本 看 (V) 尿 节 夫 (A) 工具 (帮助 H) 


帘 高 


两 秒 后 显示 同 题 的 答案 两 秒 后 显示 问题 的 答案 : 
你 是 淮 ? 你 是 谁 ? 
我 是 小 明 呀 





11-21 ”$timeout 服务 11-22 ”2s 后 页 面 效 果 


3. $q 服务 

AngularJS 中 $q 这 个 服务 可 以 帮助 我 们 在 应 用 中 实现 异步 的 功能 , 当 函 数 执行 完成 时 或 异常 时 ,， 它 允许 
我 们 使 用 函数 的 返回 值 。 

$q 提供 的 方法 有 以 下 几 种 。 

。 $q.all0: 合并 多 个 promise， 得 到 一 个 新 的 promise。 

。 $q.defer0: 返回 一 个 deferred 对 象 ,这 个 对 象 可 以 执行 几 个 常用 的 方法 ， 比 如 resolve、reject、notify 等 。 

。 $q.when(): 返回 一 个 promise 对 象 。 

【 例 11-17】〔 实 例文 件 ，ch11\Chap11.17.html》$q 服务 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>$q</title> 

</head> 

<body> 

<div ng-app="myApp”" ng-controller="con"> 

</div> 

</body> 

</html> 

<script src="angular.js"></script> 
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<script> 
var app=angular.module('myApp', []); 
app.factory ("Service", function ($q, $10g) { 
Var login=function(){ 
var defer-=5q.defer() ;// 使 用 5q 的 defer () 方 法 创建 一 个 对 象 
// 假 设 向 Service 发 送 了 一 个 http 请 求 ,请 求 返 回 数据 .虚拟 一 下 , 直接 创建 一 个 data 
var data={result:"true"， userName:" 小 明 "}7 
// 可 以 根据 返回 的 数据 ,去 决定 下 一 步 做 什么 
// 表 示 向 Service 发 送 的 请 求 得 到 了 回应 ,这样 就 可 以 使 用 defer 对 象 中 的 resolve 方法 和 返回 的 数据 , 去 执 
// 行 一 些 操作 
if(data.result==="true"){ 
defer.resolve (data); 

} 
// 如 果 不 满足 ,说 明 过 到 了 错误 , 可 以 使 用 defer 对 象 中 的 reject () 去 处 理 错误 信息 
elsef 


defer .reject(' 请 求 数据 失败 ') 


! 
// 当 使 用 resolve () 方 法 和 reject () 方 法 去 执行 一 些 操作 时 ,需要 使 用 promise 中 的 then () 方 法 
defer.promise // 调 用 promise 的 then() 方 法 
//then () 第 一 个 参数 就 是 满足 条 件 要 执行 的 函数 ,第 二 个 参数 是 处 理 问题 的 函数 
.then( 
function (data){ 
$log.info("hello"+" "+data.userName); 
]， 
function (error){ 
$log.warn (error); 
} 
) 
] 7 
// 返 回 _login 方法 ,就 可 以 在 其 他 地 方 使 用 它 
return{ 
login:_ login 
] 7 
]) 
// 把 创建 的 服务 注入 控制 器 
app.controller('con',function($scope, $log, Service)1{ 
Service.1ogin() ;// 使 用 服务 中 的 10gin() 方 法 .这 样 当 控制 器 加 载 完 就 会 执行 Service 
a 






































</script> 
相关 的 代码 实例 可 参考 Chap11.17.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-23、 图 11-24 所 示 。 
Be - Oo x 全 = HH 
因 59 x 国名 x 
© OO |© Iocalhost63342/an… Q@ 安 | } CO © Ilocahost 
[R | Hements Console Sources 为 3 X RD Elements Console sources 为 1 : Xx 
四 @ |top 器 回 G | v | [RE 
helilo 小 明 全 * 请 求 数 据 失败 ngular- 
图 11-23 ”S$q 请 求 成 功 时 图 11-24 遇 到 错误 时 
4. $http 














$http 是 AngularJS 应 用 中 最 常用 的 服务 。AngularJS 内 置 的 $http 服务 简单 地 封装 了 浏览 器 原委 
XMLHttpRequest 对 象 ， 可 以 直接 同 外 部 进行 通信 。 
具体 用 法 看 下 面 一 个 简单 的 实例 。 
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先 在 $http.html 页 面 下 创建 一 个 angular.txt 文件 ， 里 面 的 内 容 如 图 11-25 所 示 。 





























我 们 使 用 $http 模拟 向 服务 器 请 求 数据 ， 这 里 请 求 的 是 angular.txt 文件 中 的 数据 。 














【 例 11-18】〔 实 例文 件 ，ch11\Chap11.18.html〉》$http 服务 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>$http</title> 
</head> 
<body> 
<div ng-app="myApp”" ng-controller="con"> 
<p> 下 面 是 请 求 的 信息 :</p> 
<hl>{{datas}}</hl> 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
Var app=angular.module('myApp', []); 
app.controller('con', function($scope, $http) { 
// 使 用 $http 中 的 get 方法 请 求 ,调用 then 方法 接受 数据 
$http.get ("./angular.txt") .then (function (response){ 
$scope.datas=response.data; 
Ds 
Ds 
</script> 
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相关 的 代码 实例 可 参考 Chap11.18.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-26 所 示 。 





国 ai - CNUsersAdminisratorpeskopwm - — 0O Xx 
Eile Edi View Navigate Code Befactor Run Iools VCS Window Help 国 hupv/ocahorte334. ~ C | 国 shtp 

anli ) 呈 14) 着 angularbd 和 a HN NE) BV) A) IRM NO 
-| 广 Shtphtml | 前 angularbt x 鳃 

1 学 习 angular. js, 你 会 沉浸 其 中 。 下 面 是 请 求 的 信息 ， 

学 习 angular.js, 你 会 沉浸 其 中 。 


Matform and Plugin.. (today 10:08) 1:21 CRLF: UTF-8: © @ OO 








各 100% > 


11-25 ”请 求 的 数据 11-26 ”请 求 的 数据 在 页 面 中 显示 的 效果 


11.6 ”模型 


前 面 已 经 用 到 过 的 ng-model， 就 是 本 节 要 介绍 的 模型 指令 。ng-model 指令 
HTML 控制 器 (input、select) 的 值 。 

















11.6.1 ng-model 指令 
































绑 定 应 用 程序 数据 到 





ng-model 指令 可 以 将 输入 域 的 值 与 AngularJS 创建 的 变量 绑 定 。 下 面 使 用 ng-model 指令 来 绑 定 输入 域 








的 值 到 控制 器 的 属性 。 
【 例 11-19】〔 实 例文 件 ， chll\Chap11.19.html) ng-model 指令 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 





263 





NN _ 
HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 


行 的 结果 如 图 11-27 所 示 。 





a 
11. 


<title>ng-model</title> 

</head> 

<body> 

<div ng-app="myApp”" ng-controller="con"> 
数据 :<input type="text" ng-model="data"> 

</div> 

</body> 

</html> 

<script src="angular.js"></script> 

<script> ee OS 
Var app=angular.module ('m' Li 
ee oe hetpMocalhost6334 P ~ © | 国 ng-model 

S$scope.data=" 我 是 绑 定 的 数据 "7 文件 (有 ) ”篇 岛 (E) 。 豆 看 (V) ”收藏 夫 (A) ”工具 (0) 帮助 (H) 

Wir 帘 


</script> 数据 : 臣 旦 过 十 的 数据 
相关 的 代码 实例 可 参考 Chap11.19.html 文件 , 在 正 浏览 器 中 运 








6.2 双向 绑 定 11-27 ng-model 指令 


双向 绑 定 ， 就 是 实现 数据 的 双向 绑 定 ， 在 修改 输入 域 的 值 时 ，AngularJS 属性 的 值 也 同时 修改 。 
【 例 11-20】“〈 实 例文 件 ， chll\Chap11.20.html) 双向 数据 绑 定 实例 。 代 码 如 下 ; 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8"> 
<title>ng-model</title> 

</head> 

<body> 

<div ng-app=""> 
<input type="text" ng-model="name"> 
<p>input 输入 框 的 值 绑 定 了 变量 name</p> 
<p> name="{ {name}}"</p> 

</div> 

</body> 

</html> 

<script src="angular.js"></script> 


相关 的 代码 实例 可 参考 Chap11.20.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 





Za 


11-28 所 示 ; 在 输入 域 中 














输入 “小 明 ”， 在 正 浏览 器 中 显示 的 效果 如 图 11-29 所 示 。 


作 11. 
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所 0 x 
园 httpi//localhost6334. 只 -上 | 国 ng-mode[ 取 向 央 定 国 fspV/ecalhost6334 内- | 国 ng-medel 双 向 定 
文件 (] ”顽强 (E] 查看 (V) ”收藏 夫 (A) 工具 人) 帮助 (H) 文件 站” 宕 纺 (Ej 各 看 V) 收藏 夫 (A) 工具 寺 助 (H) 
2 2 
人 | 小 明 x 
input 输 入 框 的 值 绑 定 了 变量 name: input 输 入 框 的 值 绑 定 了 变量 name: 
name="” name=“ 小 明 ” 
v v 
145% ~ 夺 145% ~ 
图 11-28 ”页面 加 载 完 成 效果 11-29 ”在 输入 域 输入 值 后 的 效果 


6.3 CSS 类 


ng-model 指令 基于 它们 的 状态 为 HTML 元 素 提供 了 CSS 类。 








第 国 章 AngularJs 框架 


ng-model 指令 根据 表单 域 的 状态 可 以 添加 / 移 除 类 ， 如 表 11-1 所 示 。 





表 11-1 可 以 添加 / 移 除 的 类 














类 说 有明 
ng-invalid 表示 表单 是 否 通过 验证 。 如 果 表单 没有 通过 验证 ， 它 为 true 
ng-valid 表示 表单 是 否 通过 验证 。 如 果 表单 通过 验证 ， 它 为 true 
ng-pristine 布尔 值 属性 ， 没 有 修改 过 表单 时 为 ture 
ng-dirty 布尔 值 属性 ， 控 件 输入 值 时 为 true 
ng-touched 布尔 值 属性 ， 失 去 焦点 时 为 true 








ng-untouched 布尔 值 属性 ， 没 失去 焦点 时 为 tme 


【 例 11-21】 (实例 文件 : chll\Chap11.21.html) CSS 类 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ng-model CSS 类 </title> 
<style> 
input.ng-Pristinef 
background-color:#54FF9F; 
li 
</style> 
</head> 
<body> 
<form ng-app= 
输入 你 的 手机 号 : 
<input ng-model="text" required> 
</form> 
<!--<p> 编 辑 文本 域 ,不 同 状态 背景 颜色 会 发 生变 化 .</P>--> 
<!--<p> 文 本 域 添加 了 required 属性 ,该 值 是 必需 的 , 如 果 为 空 则 是 不 合法 的 .</P>--> 
</body> 
</html> 
<script src="angular.js"></script> 


相关 的 代码 实例 可 参考 Chap11.21.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-30 所 示 ， 当 在 表单 输 
入 值 时 ， 表 单 恢 复 默 认 颜 色 ， 如 图 11-31 所 示 。 


name="form"> 























= 党 和 % - ODO x 
国 htpy/iocalhost5334 记忆 | 国 ng-model cs 国 htp//ocalhost6334. 只 -| 国 ng-model css 类 
文件 (党 误 (E) ”查看 (V) ”收藏 天 (A) 工具 (T) 帮助 (H) 文件 (有 ”篇 外 (6) 得 看 (V) 收藏 天 (A) 工具 (帮助 (H) 
帘 寓 
输入 你 的 手机 号 ， JE 输入 你 的 手机 号 ， [0123456789 x 
夸 135% ~ 四 135% ~ 











图 11-30 页面 加 载 完成 效果 图 11-31 在 文本 域 输入 值 后 效果 


11.7 事件 机 制 


在 JavaScript 中 所 涉及 的 事件 ， 在 AngularJS 中 基本 也 都 涉及 了 ， 只 是 表达 的 方式 和 实现 的 方法 不 同 而 
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SS 


已 。AngularJS 有 自己 的 HTML 事件 指令 。 


【 例 11-22】 〈 实 例文 件 ， chll\Chap11.22.html) 事件 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ng-click 指令 </title> 
</head> 
<body> 
<div ng-app="myApp" ng-controller="con"> 
<button ng-click="hide()"> 隐 藏 </button> 
<p ng-hide="myVar"> 我 是 隐藏 的 内 容 </p> 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
Var app=angular.module('myApp', []); 
app.controller('con', function($scope) { 
$scope.hide=function() { 
$scope.myVar=true; 
} 
Ds 
</script> 


相关 的 代码 实例 可 参考 Chap11.22.html 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 11-32 所 示 ; 单 击 “ 隐 藏 ” 
按钮 ， 在 正 浏览 器 中 显示 的 效果 如 图 11-33 所 示 。 
er 0 x 
国 hpyWocahos6334 D - 地]| 园 ng cc 人 


文件 作 。 病 恕 5) ”站 看 V) 必 藏 天 (A) 工具 TT) 帮助 (HI 
帘 











- 0O x 

国 httpy/ocalhost5334; PP ~- 忆 | 国 ng-dicki 信 
文件 月 名 (查看 NV) 收藏 AA) 工具 (T) 大 盈 H) 
全 


Li | 
我 是 隐藏 的 内 容 





Li | 





图 11-32 页面 加 载 完 成 效果 图 11-33 单 击 “ 隐 藏 ”按钮 后 效果 


11.8 数据 存储 


AngularJS 中 有 一 些 方法 可 以 存储 数据 ， 创 建 一 个 factory 工厂 来 储存 和 调 取 数 据 是 一 种 比较 常用 的 方 
法 。 具 体操 作为 : 在 JavaScript 脚本 中 创建 一 个 factory 工厂 ， 把 数据 载 入 工厂 ， 这 样 在 其 他 的 控制 器 中 便 
可 以 调用 工厂 中 的 数据 。 也 可 以 单独 创建 一 个 JavaScript 文件 ， 在 主页 面 中 载 入 该 JavaScript 文件 ， 这 样 也 
可 以 实现 对 数据 的 调用 。 

【 例 11-23】“〈 实 例文 件 : chll\Chap11.23.html) 数据 存储 实例 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 存 储 数 据 </title> 
</head> 


<body ng-app="myApp"> 
<div ng-controller="conl">1.{{myDatal}}</div> 
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<div ng-controller="con2">2. { {myData2}}</div> 
<div ng-controller="con3">3. {{myData3}}</div> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
var app=angular.module ("myApp", []); 
// 创 建 工厂 ,存储 数据 
app.factory('myData', function(){ 
return{ 
message:' 存 储 的 数据 '， 
data:[' 小 明 ',' 小 红 ',' 小 华 ']， 
object: {name:'jock',age:'25'} 
RE 
]) 7 
// 在 控制 器 中 调用 存储 的 数据 
app.controller ("conl", function($scope,myData){ 
$scope.myDatal=myData.message; 
Ds 
app.controller ("con2",function($scope,myData){ 
$scope.myData2=myData.data.join('-');// 把 数组 转换 为 字符 囊 
nD; 
app.controller ("con3", function($scope,myData){ 
$scope.myData3=myData.object.name+" "+myData.object.age; 
]) 7 
</script> 


相关 的 代码 实例 可 参考 Chap11.23.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-34 所 示 。 

















园 hepy//iocalhoet6334 P ~ | 国 存 结 经 
文件 (六 名 (E) 得 看 (V) 收藏 A) 工具 天 一 H) 


刘 到 
1. 存 储 的 数据 拉 
2. 小 明 -小 红 -小 华 
3.jock 25 v 





图 11-34 ”数据 存储 


11.9 其 他 


在 最 开始 的 时 候 对 于 AngularJS 在 view 上 的 绑 定 都 必须 使 用 直接 的 Sscope 对 象 ， 对 于 Controller 来 说 ， 
也 得 必须 注入 $scope 这 个 service。AngularJS 从 1.2 版 本 开始 带 来 了 新 语法 Controller as。 它 的 出 现 ， 简 洁 
了 Controller， 使 我 们 不 需要 把 $scope 作为 依赖 项 ， 可 以 使 用 this 在 控制 器 上 直接 添加 想 要 的 属性 。 

在 AngularJS 项 目 中 , 有 时 会 遇 到 压缩 代码 而 导致 项 目 出 错 , 这 时 有 可 能 是 因为 没有 使 用 安全 的 依赖 注 
入 方法 。 具 体 安 全 的 依赖 注入 方法 ， 请 看 下 面 两 个 小 节 的 内 容 。 









































11.9.1 Controller as 语 ; 

















使 用 this 来 替代 $scope， 把 属性 





AngularJS 中 提供 的 Controller as 语法 ,简单 说 就 是 可 以 在 Controller 
和 方法 挂 载 到 this 上 。 
传统 的 Controller， 代 码 如 下 : 


过 
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SS 


app.controller('con', function ($scope) { 
$scope.title='content'; 


Ds 
在 AngularJS1.2 版 本 之 后 ， 我 们 可 以 写成 如 下 代码 : 


app.controller('con',function(){ 
this.title='content'; 


D3; 
在 页 面 上 使 用 时 可 以 使 用 Controller as 语法 实例 化 一 个 对 象 ， 如 下 面 的 实例 。 
【 例 11-24】〔 实 例文 件 ，ch11\Chap11.24.html〉》Controller as 实例 。 代 码 如 下 : 


<!doctype html> 
‘<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>controller as</title> 
</head> 
<body> 
<div ng-app="myApp" ng-controller="con as demo"> 
{{demo.data}} 
</div> 
</body> 
</html> 
<script src="angular.js"></script> 
<script> 
Var app=angular.module('myApp', []) 
app.controller ("con", function(){ 
this.data=" 你 好 , jock! " 









































]) 7 - OO x 
</script> 国 hpi/ocalhost5334, 记忆 国 controller as 
文件 月” 久 交 (FE) 下 看 M) 收藏 天 (A) 工具 站 帮助 (H) 


从 上 面 代码 可 以 看 出 ,这 里 的 this 指 的 是 as 后 面 那个 实例 化 的 对 |。 
象 。 我 们 可 以 在 表达 式 中 使 用 这 个 对 象 。 

相关 的 代码 实例 可 参考 Chap11.24.html 文件 ， 在 下 浏览 器 中 运 | 你 好 ,jock ! 
行 的 结果 如 图 11-35 所 示 。 


11.9.2 ”安全 的 依赖 注入 方法 11-35 ”Controller as 实例 
我 们 平时 都 是 把 依赖 注入 function 中 ， 其 代码 如 下 : 


var app=angular.module('myApp', []) 
app.controller("con", function($scope, $log){ 
$scope.data=" 你 好 , jock! "7 


$10g.10og ("你 好 ,jock! ") 
Ds; 


这 种 方法 不 是 最 安全 的 依赖 注入 方法 ， 因 为 有 时 候 我 们 会 压缩 代码 ， 这 时 有 的 依赖 被 压缩 ， 如 $log 
使 用 Gulp 压缩 工具 , 会 被 压缩 成 简写 的 1, 这 时 AngularJS 就 识别 不 出 $log, 执行 压缩 文件 就 会 提示 错误 信息 。 
解决 这 种 情况 ， 就 需要 使 用 安全 的 依赖 注入 方法 ， 即 把 控制 器 的 第 二 个 参数 放 进 一 个 数组 里 ， 把 要 注 
入 的 依赖 一 次 写 入 数组 , 然后 分 别 用 引号 包 衷 起 来 , 这 样 注入 的 依赖 就 会 传 入 function。 这 样 , 不 管 function 
中 参数 的 名 字 怎 么 改变 ， 都 可 以 使 用 注入 的 依赖 。 虽 然 function 中 参数 的 名 字 可 以 改变 ， 但 是 ， 顺 序 很 重 
要 ，function 中 的 参数 必须 与 注入 的 依赖 相对 应 。 下 面 举 一 个 例子 。 

【 例 11-25】 〈 实 例文 件 : chll\Chap11.25.html) 安全 依赖 注入 方法 实例 。 代 码 如 下 : 


<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
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<title> 安 全 的 注入 依赖 的 方法 </title> 

</head> 

<body> 

<div ng-app="myApp" ng-controller="con"> 
{{data}} 

</div> 

</body> 

</html> 

<script src="angular.js"></script> 

<script> 
var app=angular.module('myApp', []) 
app.controller ("con", ["$scope", "$10g", function($scope,1){ 

$scope.data=" 你 好 , jock! "; 











© - x 
1.1og ("你 好 ,jock! ") // 在 控制 台 打 印 数据 EA x 
11); CQ 侣 | localhost63342/anli,.. Q 女 | 让 
</script> pe 
通过 上 面 代码 可 以 发 现 ，$log 与 function 中 的 参数 1 对 应 , 1 就 有 | go we x 
$log 所 有 的 功能 。 加 @ top vv | Fer Defaultlevelsv 团 Gi 
相关 的 代码 实例 可 参考 Chap11.25 html 文件 ， 在 IE 浏览 器 中 运行 me 





的 结果 如 图 11-36 所 示 。 11-36 ”安全 的 依赖 注入 


11.10 ”路 由 


AngularJS 中 的 路 由 , 允许 我 们 通过 不 同 的 URL 访问 不 同 的 内 容 , 并 且 可 以 实现 多 视图 的 单 页 Web 应 用 。 


通常 URL 形式 为 http://qiangu.com/first/page， 但 在 单 页 Web 应 用 中 AngularJS 通过 “#+” 标 记 实现 ， 
例如 : 


http://qiangu.com/#/first 
http://qiangu.com/#/second 
http://qiangu.com/#/three 


当 单 击 上 面 任意 一 个 链接 时 ， 向 服务 端 请 求 的 地 址 都 是 http://qiangu.com， 因 为 “#” 号 后 面 的 内 容 在 
向 服务 端 请 求 时 会 被 浏览 器 忽略 掉 ， 所 以 就 需要 在 客户 端 实现 “#” 号 后 面 内 容 的 功能 实现 。 简 单 来 说 ， 就 


是 路 由 通过 “##” 标 记 帮 助 我 们 区 分 不 同 逻 辑 页 面 ， 并 将 其 绑 定 到 对 应 的 控制 器 上 。URL 所 对 应 的 视图 和 
控制 器 示意 图 如 图 11-37 所 示 。 
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11-37 ”URL 示意 图 


【 例 11-26】 〈 实 例文 件 : chll\Chap11.26.html)。 路 由 实例 。 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 


<title> 路 由 实例 </title> 
<style> 
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*{margin:0;padding:0;} 
ul{overflow:hidden;} 
ul li{list-style:none;float:left;padding:5px 10px;} 
a{text-decoration:none;} 
div{font-size:30px;width:260px; height:100px;text-align:center; 
line-height:100px;border:1lpx solid black;margin-left:10px;} 
</style> 
</head> 
<body ng-app='myapp'> 
<ul> 
<1i><a href="#/"> 首 页 </a></1i> 
<1i><a href="#/1ist"> 列 表 页 </a></1i> 
<li><a href="#/detail"> 详 情 页 </a></1i> 
<li><a href="#/connect"> 其 他 连接 </a></1i> 
</ul> 
<div ng-view></div> 
<script src="angular.min.js"></script> 
<script src="angular-route.js"></script> 
<script> 
var app=angular.module('myApp', ['ngRoute'])//[] 内 引入 依赖 模块 ngRoute 
app.config(['$routeProvider', function($routeProvider){ 
$routeProvider.when('/', {template:' 首 页 页 面 '}) 
.when('/list', {template:' 列 表 页 页 面 '}) 
.when('/detail', {template:' 详 情 页 页 面 '}) 
.when('/connect', {template:' 链 接 页 面 '}) 
a 
</script> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap11.26.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-38 所 示 。 当 单 击 “ 详 
情 页 ”按钮 时 ， 页 面 显示 效果 如 图 11-39 所 示 。 
| ¢ lL I ry Er 7 


ZAR WME EBV es I NM 














my El 7 
Be EV) CaN Im Wen 





列表 页 其 他 连接 


首页 | 列表 页 ”详情 页 ”其 他 连接 








详情 页 页 面 


首页 页 面 














图 11-38 ”页 面 加 载 完成 时 11-39 ” 单 击 “ 详 情 页 ”按钮 后 页 面 效 果 
实现 上 面 这 个 案例 ， 主 要 需 以 下 4 个 步骤 : 
(1) 载 入 实现 路 由 的 js 文件 ，angularjs。 代 码 如 下 : 
<script src="angular-route.js"></script> 
(2) 在 模块 中 引入 依赖 模块 ngRoute。 代 码 如 下 : 
var app=angular.module('myApp', ['ngRoute']) 
(3) 添加 ngView 指令 。 代 码 如 下 : 
<div ng-view></div> 
该 div 内 的 内 容 会 根据 路 由 的 变化 而 变化 。 
(4) 配置 $routeProvider， 用 来 定义 路 由 的 规则 。 代 码 如 下 : 


app.config(['$routeProvider', function($routePprovider){ 
$routeProvider.when('/', {template:' 首 页 页 面 '}) 
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.when('/1ist', {template:' 列 表 页 页 面 '}) 

-when('/detail', {template:' 详 情 页 页 面 '}) 

.when('/connect', {template:' 链 接 页 面 '}) 
HD 


11.11 标准 项 目 结构 设计 


对 于 AngularJS 的 初学 者 而 言 ， 自 己 创建 一 个 完整 的 angular 项 目 结构 很 难 实现 ， 但 通过 AngularJS 官 
方 提供 的 命令 行 工 具 Angular-cli， 则 可 以 很 容易 地 创建 AngularJS 项 目 。 
回 


$11.11.1 angular-cli 环境 搭建 


1. 安装 NPM 和 node.js 

首先 ， 检 查 一 下 计算 机 上 是 否 安装 了 NPM 和 nodejs。 右 击 左下 角 的 “开始 ”按钮 ， 在 弹出 的 菜单 中 
选择 “运行 ”选项 ， 在 弹出 的 “运行 ”对 话 框 中 输入 CMD， 单 击 “ 确 定 ” 按 钮 。 在 命令 行 里 分 别 输入 npm 
-V 和 node -v 检查 是 否 安装 有 NPM 和 nodejs， 如 果 安 装 了 会 提示 版 本 ， 如 图 11-40 所 示 。 

如 果 提 示 其 他 信息 ， 则 要 到 NPM 和 node.js 官网 去 下 载 它们 ， 这 里 就 不 装 述 了 。 


2. 淘宝 NPM 镜像 

淘宝 的 NPM 镜像 是 一 个 完整 的 npmjs.org 镜像 ， 可 以 用 来 代替 官方 版 本 。 设 置 了 淘宝 镜像 后 ， 下 于 
件 就 是 从 国内 网 站 下 载 ， 下 载 速度 相对 较 快 。 

在 命令 行 里 输入 npm install -g cnpm --registry=https://registry.npm.taobao.org, 按 Enter 键 进行 全 局 安装 。 
安装 完成 后 ， 输 入 cnpm -v 检查 是 否 安装 成 功 ， 如 果 提 示 如 图 11-41 所 示 的 信息 ， 说 明 安装 成 功 。 

















而 CAWINDOWS\eystem37 





画 CMWINDOWS\system32\cmd.exe 





图 11-41 检测 cnpm 安装 是 否 成 功 
3. 安装 Typescript 和 Typings 
在 命令 行 中 输入 npm install -g 
typescript typings， 按 Enter 键 安装 ， 安 
装 完成 如 图 11-42 所 示 。 





4. 安装 Python 

安装 Python 时 选择 Python 2.7.15 
版 本 。 在 命令 行 中 输入 python, 按 Enter 
键 会 提示 如 图 11-43 所 示 的 信息 。 图 11-42 安装 Typescript 和 Typings 
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这 里 没有 选择 Python 的 最 新 版 本 Python 3.6 系列 ,因为 最 新 版 本 的 Python 在 安装 angular-cli 时 总 是 报 
错误 ， 说 明 目 前 还 不 支持 。 











5. 全 局 安装 Angular-cli 


完成 上 面 4 个 步骤 后 ， 就 可 以 安装 Angular-cli 了 。 在 命令 行 中 输入 cnpm install -g @angularcli@latest， 
按 Enter 键 安装 。 安 装 完成 后 ， 在 命令 行 中 输入 ng-v 来 检测 版 本 ， 如 图 11-44 所 示 。 











画 CWINDOWS\syst 








图 11-43 检测 python 版 本 图 11-44 检测 Angular-cli 版 本 


11.11.2 ”使 用 Angular-cli 创建 项 目 


Angular-cli 全 局 安装 完成 后 ， 就 可 以 按照 本 节 所 讲 的 步骤 来 创建 项 目 了 。 
步骤 1: 进入 项 目的 路 径 ， 假 设 要 在 如 图 11-45 所 示 的 文件 夹 路 径 下 创建 项 目 。 
在 命令 行 里 输入 “cd 路 径 ”， 如 cd Ci\Users\Administrator\Desktop\anli\angular， 如 图 11-46 所 示 。 

















= | angular - OO x 
< ses Administrator\Desktop\aniNangular 
J = 关 
a 
EE 
v < > 
0 个 项 目 








图 11-45 创建 项 目的 文件 夹 路 径 图 11-46 在 命令 行 中 进入 到 该 文件 夹 路 径 


步骤 2: 在 命令 行 里 输入 “ng new 项 目 名 称 ” 假如 创建 一 个 名 为 demo 的 项 目 ， 如 图 11-47 所 示 。 
步骤 3: 启动 项 目 ， 在 命令 行 中 输入 ng serve， 如 图 11-48 所 示 。 
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fe t pw A 
图 11-47 创建 名 为 demo 的 项 目 








11-48 ”启动 项 目 
肾 4:， 在 浏览 器 中 输入 默认 的 地 址 http://localhost:4200， 在 Chrome 中 运行 的 效果 如 图 11-49 所 示 。 








这 样 就 成 功 创建 了 一 个 项 目 ， 项 目 结构 如 图 11-50 所 示 。 
全 二 | 日 全 =1demo = x 
@ Demo x Es = 中 
¢ QO |Olocahost a 娘 | : 4 二 
‘Welcome to app! 和 Wn 
Es 
是 
了 
Here are some links to help you start: ee 
Tour of Heroes tlintjson 
» CllDocumentation 
本 本 














图 11-49 Angular-cli 初始 界面 图 11-50 项目 结构 


11.12 ”就 业 面试 技巧 与 解析 
11.12.1 面试 技巧 与 解析 〈 一 ) 


面试 官 : 请 问 AngularJS 内 置 的 filter 有 哪些 ? 
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应 聘 者 : AngularJS 内 置 的 filter 有 以 下 9 种 。 

date: 把 日 期 类 型 的 数据 转化 为 想 要 的 格式 类 型 。 

currency: 货币 转换 。 

limitTo: 限制 一 个 字符 串 显示 的 字符 数 ， 也 可 以 限制 一 个 数组 显示 的 项 目 数 。 
orderBy: 排序 。 

lowercase: 转换 为 小 写 。 

uppercase: 转换 为 大 写 。 

number: 格式 化 数字 ， 加 上 千 位 分 隔 符 ， 并 接收 参数 限定 小 数 点 位 数 。 

filter: 处 理 一 个 数组 ， 过 滤 出 含有 某 一 个 子 串 的 元 素 。 

json: 格式 化 json 对 象 。 


11.12.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : 请 问 AngularJS 的 数据 绑 定 采 用 什么 机 制 ? 

应 聘 者 : 双向 数据 绑 定 是 AngularJS 的 核心 机 制 之 一 。 当 view 中 有 任何 数据 变化 时 ， 会 更 新 到 model， 
当 model 中 数据 有 变化 时 ，view 也 会 同步 更 新 ， 显 然 ， 这 需要 一 个 监控 。 原 理 就 是 ，AngularJS 在 $scope 
模型 上 设置 了 一 个 监听 队列 ， 用 来 监听 数据 变化 并 更 新 view。 每 次 绑 定 一 个 东西 到 view 上 时 AngularJS 就 
会 往 $watch 队列 里 插入 一 条 $watch， 用 来 检测 它 监视 的 model 里 是 否 有 变化 的 东西 。 当 浏览 器 接收 到 可 以 
被 AngularJS 处 理 的 事件 时 ，$digest 循环 就 会 触发 ， 遍 历 所 有 的 $watch， 最 后 更 新 DOM。 
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第 3 篇 


高 级 应 用 


通过 对 前 面 篇 章 的 学 习 ， 本 篇 将 结合 HTML 5 技术 介绍 移动 Web 应 用 程序 的 jQuery Mobile 框架 。 通 
过 本 篇 的 学 习 ， 使 用 jQuery Mobile 框架 ， 读 者 可 以 轻松 地 创建 移动 端 项 目 。 


第 12 章 
第 13 章 
第 14 章 
第 15 章 
第 16 章 
第 17 章 


认识 jQuery Mobile 
jQuery Mobile 页 面 
jQuery Mobile 页 面 组 件 
使 用 jQuery Mobile 主题 
使 用 jQuery Mobile 事件 
使 用 jQuery Mobile 插件 








第 12 章 
认识 jQuery Mobile 


~ 


3 学 习 指引 


jQuery Mobile 用 于 编写 移动 Web 应 用 程序 , 它 能 运行 于 所 有 主流 的 移动 平台 之 上 。 使 用 jQuery Mobile 
可 以 帮助 我 们 轻松 实现 华丽 的 、 跨 设备 和 跨 平台 的 Web App 应 用 程序 ， 大 大 提高 设计 者 的 移动 开发 效率 和 
质量 。 学习 jQuery Mobile， 需 要 熟悉 JavaScript 和 jQuery 的 相关 基础 知识 ， 它 们 是 学 习 jQuery Mobile 的 基 
础 。 本 章 将 重点 介绍 jQuery Mobile 的 基础 知识 。 


”重点 导读 


"了 解 jQuery Mobile 基础 。 

。 掌 握 移动 设备 模拟 器 。 

。 学 会 安装 jQuery Mobile。 

。 掌 握 创 建 jQuery Mobile 页 面 。 


12.1 jQuery Mobile 基础 


jQuery Mobile 是 jQuery 新 推出 的 函数 库 ， 它 是 jQuery 在 手机 和 平板 计算 机 等 移动 设备 上 应 用 的 版 本 。 
jQuery Mobile 包括 构建 完整 移动 Web 应 用 程序 和 网 站 所 需要 的 所 有 UI 组 件 。 

随 着 智能 手机 和 平板 计算 机 的 流行 ， 主 流 移动 平面 上 的 浏览 器 功能 已 经 与 传统 的 桌面 浏览 器 功能 非常 
相似 ， 因 此 jQuery 团队 开发 了 jQuery Mobile。 

jQuery Mobile 不 仅 给 主流 移动 平台 带 来 jQuery 核心 库 , 而 且 发 布 一 个 完整 统一 的 jQuery 移动 UI 框架 ， 
支持 主流 的 移动 平台 。jQuery Mobile 开发 团队 曾 说 :“ 能 开发 这 个 项 目 ， 我 们 非常 兴奋 。 移 动 Web 太 需 要 
一 个 跨 浏览 器 的 框架 ， 让 开发 人 员 开 发 出 真正 的 移动 Web 网 站 。 我 们 将 尽 全 力 满足 这 样 的 需求 。” 
jQuery Mobile 是 一 个 基于 HTML 5 的 前 端 框架 ， 拥 有 响应 式 网 站 特性 ， 设 计 者 不 需要 为 每 一 个 移动 设 
备 或 操作 系统 单独 开发 应 用 ， 可 以 通过 jQuery Mobile 框架 设计 一 个 高 度 响 应 的 网 站 或 应 用 ， 它 能 运行 于 所 
有 的 主流 智能 手机 、 平 板 计算 机 和 桌面 系统 。 

jQuery Mobile 的 优势 : 
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。 简单 易 用 : 页 面 开 发 主要 使 用 标记 , 很 少 使 用 JavaScript。 jQuery Mobile 通过 HTML 5 标记 和 CSS 3 
规范 配置 和 美化 页 面 ， 对 于 已 经 熟悉 HTML 5 和 CSS 3 的 读者 来 说 ， 非 常 容易 上 手 。 
。 提供 丰富 的 函数 库 . 常见 的 键盘 、 触 碰 功 能 等 ， 开 发 人 员 不 用 编写 代码 ， 只 需要 经 过 简单 的 设置 ， 
就 可 以 实现 需要 的 功能 ， 大 大 减少 了 程序 员 开发 的 时 间 。 
。 跨 平台 : 目前 大 部 分 的 移动 设备 浏览 器 都 支持 HTML 5 标准 和 jQuery Mobile, 所 以 可 以 实现 跨 不 同 
的 移动 设备 。 例 如 Android、Apple iOS、BlackBery、Windows Phone、Symbian 和 MeeGo 等 。 
。 丰富 的 布景 主题 和 ThemeRoller 工具 : jQuery Mobile 提供 了 布局 主题 ， 通 过 这 些 主题 ， 可 以 轻松 地 
快速 创建 绚丽 多 彩 的 网 页 。 通 过 使 用 jQuery UI 的 ThemeRoller 在 线 工 具 ， 只 需要 在 下 拉 菜 单 中 进 
行 简单 的 设置 ， 就 可 以 制作 出 丰富 多 彩 的 网 页 风格 ， 并 且 可 以 将 代码 下 载 下 来 应 用 。 
jQuery Mobile 的 工作 原理 是 提供 可 触摸 的 UI 小 部 件 和 Ajax 导航 系统 ， 使 页 面 支持 动画 式 切 换 效 果 。 
以 页 面 中 的 元 素 标签 为 时 间 的 驱动 对 象 ， 当 触摸 或 者 单 击 时 进行 触发 ， 最 后 在 移动 终端 的 浏览 器 中 实现 一 
个 个 应 用 程序 的 动画 展示 效果 。 



















































































12.2 jQuery Mobile 操作 流程 


jQuery Mobile 的 操作 流程 与 编写 HTML 类 似 ， 开 发 工具 也 一 样 ， 编 辑 制作 好 的 jQuery Mobile 页 面 就 
可 以 在 浏览 器 或 者 模拟 器 中 浏览 了 。 操 作 流 程 有 以 下 3 个 步骤 : 

(1) 创建 HTML 5 文件 。 

(2) 引入 jQuery、jQuery Mobile 函数 库 和 jQuery Mobile CSS 。 

(3) 使 用 jQuery Mobile 定义 的 HTML 标准 编写 网 页 架构 和 内 容 。 


12.2.1 下 载 移动 设备 模拟 器 


使 用 jQuery Mobile 制作 的 页 面 主要 用 于 移动 端 设备 浏览 ,所 以 在 开发 时 需要 使 用 模拟 器 帮助 开发 者 预 
览 所 制作 的 jQuery Mobile 页 面 效 
果 。 本 节 主 要 向 读者 介绍 常见 的 移 rT 
动 模拟 器 Opera Mobile Emulator。 2 

Opera Mobile Emulator 是 一 款 
针对 计算 机 桌面 开发 的 模拟 移动 设 
备 的 浏览 器 ， 可 自行 设置 需要 模拟 
的 不 同型 号 的 手机 和 平板 计算 机 配 
置 ， 在 计算 机 上 模拟 各 类 手机 等 移 
动 设备 访问 网 站 。 

下 载 网 址 : http://www.opera.comy/ 
zh-cn/developer/mobile-emulator/, 在 
浏览 器 中 打开 该 网 址 ， 根 据 不 同 的 























9| 











Do your mobile development straight from your desktop, and pair it with Opera Dragonfly for advanced debugging. 
i 同 的 这 里 ; 
系统 选择 不 同 的 版 本 ， 这 里 选择 | Eee 
Windows 系统 的 版 本 ， 如 图 12-1 Opera Mobile Classic Emulator 12 1 for Linux "| 
CE 
所 示 。 本 
12-1 Opera Mobile Emulator 的 下 载 页 面 




















2 


FN 
HTML 5 从 入 门 到 项 目 实践 ( 超 信和 版) 


ss 


下 载 完 模拟 器 后 进行 安装 ， 安 装 完成 后 启动 模拟 器 ， 会 弹出 
“选择 语言 ”对 话 框 ， 在 下 拉 列 表 中 选择 “简体 中 文 ” 选项， 如 
图 12-2 所 示 。 单 击 “ 确 定 ” 按 钮 ， 将 显示 模拟 器 界面 ， 可 以 从 
中 选择 需要 模拟 的 移动 设备 ， 这 里 选择 LG Optimus 3D 选项 , 单 
击 “ 启 动 ” 按 钮 ， 如 图 12-3 所 示 ， 这 时 模拟 器 会 弹出 欢迎 界面 ， 
如 图 12-4 所 示 。 





















































欢迎 使 用 Opera Mobile 
12.11 








@ opera Mobile Emulator 一 4 
Ba 
HTC Tatoo 和 ^| 4 到 Weh Partrdit [460X800) ~ 草鸡 的 朵 网 
Wd E27] BR 
外 素 安 度 a = 
测 [3 
月 户 界面 Ta 司 
eer heert 字符 用 [GE 
Motorala Droid RAZR M sa) Ee 
才 灶 [ 
A We 局 :Nj 完全 重 轩 洲 竺 口 





E 
图 12-3 ”选择 模拟 移动 设备 12-4 ”欢迎 界面 


单 击 “ 接 受 ”按钮 打开 手 机 模拟 器 窗口 ， 在 “输入 网 址 ”文本 框 中 输入 需要 查看 网 页 效果 的 地 址 即 
可 ， 如 图 12-5 所 示 。 


这 里 直接 单 击 “ 淘 宝 网 ”图 标 ， 即 可 查看 淘宝 网 在 该 移动 设备 模拟 器 中 的 显示 效果 ， 如 图 12-6 所 示 。 



































@ operaMo- 一 口 X 


上 
hups/hsmtaobaoco 克 芽 ca。 】 
Be 


打开 手机 淘宝 App 








图 12-5 手机 模拟 器 窗口 图 12-6 ”查看 预览 效果 
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Opera Mobile Emulator 不 仅 可 以 查看 移动 网 页 的 效果 ， 还 可 以 任意 调整 窗口 的 大 小 ， 从 而 可 以 查看 不 
幕 尺 寸 的 效果 。 虽 然 Opera Mobile Emulator 模拟 器 没有 呈现 真实 手机 的 外 观 ， 但 窗口 尺寸 与 手机 屏幕 
是 一 样 大 小 的 。 
























































12.2.2 安装 jQuery Mobile 


使 用 jQuery Mobile 开发 页 面 ， 必 须 先 引入 jQuery Mobile 函数 库 〈js)、CSS 样式 表 和 配套 的 jQuery 函 
数 库 文件 。 常 见 的 引用 方法 有 以 下 两 种 : 第 一 种 是 到 jQuery Mobile 官方 网 站 上 下 载 文件 进行 引用 ， 第 二 种 
是 直接 通过 URL 链接 到 jQuery Mobile 的 CDN-hosted 引用 ， 不 需要 下 载 文件 。 

第 一 种 方法 : 从 jQuery Mobile 的 官网 下 载 该 库 文 件 (网 址 是 http://jquerymobile.com/download)， 如 图 
12-7 所 示 。 

































































图 x 


9 https//iquerymcbile.com/downlo PD ~ © | 有 Dowrload jQuery Mobile x | 
文 条 (有 篇 (E) 音 看 (MV) 收藏 Al 工具 [帮助 (H) 
突 





Latest stable version 刚 
1.4.5 


Zip file 
If you want to host the files yourself you can download a zip of all the files: 

Zip File: query .mobile-1.4.5 zip (JavaScript, CSS, and images) 
jQuery CDN pmvided by MaxCDN 


JavaScript 


Uncompressed inuery mobile-1 4 5 js (useful for debugging) 局 








图 12-7 下 载 jQuery Mobile 库 文件 
下 载 完成 并 解压 ， 然 后 直接 引用 文件 即 可 ， 代 码 如 下 : 


<head> 
<meta charset="UTF-8"> 
<title> </title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 


注意 : 将 下 载 的 文件 解压 到 和 网 页 位 于 同一 目录 下 ， 否 则 会 引用 报错 。 

第 二 种 方法 : 从 CDN 中 加 载 jQuery Mobile。CDN 的 全 称 是 Content Delivery Network， 即 内 容 分 发 网 
络 。 其 基本 思路 是 尽 可 能 避 开 互联 网 上 有 可 能 影响 数据 传输 速度 和 稳定 性 的 瓶颈 和 环节 ， 使 内 容 传 输 得 更 
快 、 更 稳定 。 

使 用 CDN 加 载 jQuery Mobile， 不 需要 在 计算 机 上 安装 任何 东西 ， 仅 需要 在 网 页 中 加 载 层 倒 样式 (.css) 
和 JavaScript 库 (js) 就 能 够 使 用 jQuery Mobile。 
户 可 以 在 jQuery Mobile 官网 上 查找 引用 路 径 ， 网 址 是 : http://jquerymobile.com/download/， 进 入 该 
网 站 后 ， 找 到 jQuery Mobile 的 引用 链接 ， 将 其 复制 后 添加 到 HTML 文件 <head> 标 记 中 即 可 ， 如 图 12-8 
所 示 。 
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HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 
RN 












复制 选中 的 代码 ， 直 接 
粘贴 到 HTML 中 





12-8 jQuery Mobile 的 引用 链接 
将 代码 复制 到 <head> 标 记 块 内 ， 代 码 如 下 : 


<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 





<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 


<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 


注意 : 由 于 jQuery Mobile 函数 库 仍然 在 开发 中 ， 所 引用 的 链接 中 的 版 本 号 可 能 与 本 书 不 同 ， 因 此 请 使 
用 官方 提供 的 最 新 版 本 ， 只 要 按照 上 述 方法 将 代码 复制 下 来 引用 即 可 。 在 执行 页 面 时 必须 保证 网 络 畅通 ， 
否则 不 能 实现 jQuery Mobile 移动 页 面 的 效果 。 


回 bol 
12.2.3 创建 jQuery Mobile 页 面 
回 
创建 jQuery Mobile 页 面 非常 简单 ， 通 过 <div> 标 签 组 织 页 面 结 构 ， 通 过 在 标签 中 设置 data-role 属性 设 
置 该 标签 的 功能 。 每 一 个 设置 了 data-role 属性 的 <div> 标 签 就 是 一 个 容器 ， 可 以 在 该 容器 内 添加 其 他 页 面 元 
素 。data-role 属性 是 HTML 5 中 新 增 的 属性 ， 通 过 设置 它 ，jQuery Mobile 页 面 就 可 以 很 快 地 定位 到 指定 的 
元 素 ， 并 对 内 容 进行 相应 的 处 理 。 下 面 创建 一 个 jQuery Mobile 页 面 。 
【 例 12-1】 “实例 文件 ，ch12\Chap12.1.html) 创建 jQuery Mobile 页 面 。 代 码 如 下 : 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 创 建 jquery mobile 页 面 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 头 部 </h1> 
</div> 
<div data-role="main"> 
<p>jQuery Mobile 页 面 </p> 
</div> 
<div data-role="footer"> 
<hl1> 屁 部 </h1l> 








加 
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</div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap12.1.html 文件 , 打开 Opera Mobile 模拟 器 , 直 
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将 将 所 制作 的 jQuery Mobile 














文件 拖 入 Opera Mobile 模拟 器 中 ， 即 可 看 到 jQuery Mobile 页 








的 效果 如 图 12-9 所 示 。 

















人 @opesMo- —- OO X 
Ce 
头 孝 
data-role="page” jQuery Mobde 风 而 


和 


12-9 jQuery Mobile 页 面 


i - 











data-role=“header” 
data-role=“main” 


data-role= footer” 


在 <head></head> 标 签 之 间 添 加 <meta> 标 签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代码 。 
在 <body></body> 标 签 之 间 , 通过 多 个 <div> 标 签 对 jQuery Mobile 页 面 的 层次 进行 划分 , 根据 每 个 <div> 





标签 中 所 设置 的 data-role 属性 值 ， 确 定 该 <div> 的 功能 分 区 。 如 果 设置 data-role 属性 值 为 header， 则 表示 该 
<div> 为 头 部 区 域 ; 设置 data-role 属性 值 为 main, 则 表示 该 <div> 为 内 容 区 域 ; 设置 data-role 属性 值 为 footer， 








则 表示 该 <div> 元 素 为 尾部 区 域 。 


12.3 ”就 业 面试 技巧 与 解析 


12.3.1 面试 技巧 与 解析 (一 ) 


面试 官 : 请 问 什么 是 jQuery Mobile? 


应 聘 者 : jQuery Mobile 是 一 个 触 控 优 化 的 框架 ， 用 于 创建 移动 Web 应 





手机 和 平板 计算 机 。 它 构建 于 jQuery 库 之 上 ， 如 果 熟 悉 jQuery 的 话 ， 
JavaScript 和 Ajax， 通 过 尽 可 能 少 的 代码 完成 对 页 面 的 布局 。 


12.3.2 ”面试 技巧 与 解析 (二 ) 























面试 官 : 请 问 在 使 


jQuery Mobile 定义 的 HTML 标准 编写 网 页 架构 和 内 容 。 














所 有 流行 的 智能 
HIML 5、 CSS3、 











用 程序 ， 适 
很 容易 学 习 它 。 它 使 用 

















jQuery Mobile 框架 时 ， 大 致 的 操作 流程 是 什么 ? 
应 聘 者 : 首先 创建 一 个 HTML 5 页 面 , 然后 载 入 jQuery Mobile 函数 库 和 jQuery Mobile CSS， 最 后 使 
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第 13 章 
jQuery Mobile 页 面 


WP 学 习 指 引 


jQuery Mobile 支持 单个 页 面 ， 也 支持 一 个 页 面 多 个 容器 。 在 jQuery Mobile 中 可 以 将 多 个 容器 写 到 同一 
个 HTML 中 ， 但 是 要 按照 jQuery Mobile 的 要 求 加 上 对 应 的 属性 ，jQuery Mobile 会 把 多 个 容器 转变 成 几 个 
分 开 的 页 面 ， 每 次 显示 的 时 候 默认 只 会 显示 第 一 个 。 本 章 将 向 读者 介绍 jQuery Mobile 页 面 的 结构 、 页 面 的 
跳 转 以 及 预 加 载 等 功能 。 


人 ”重点 导读 


“掌握 jQuery Mobile 页 面 基本 架构 。 

“。 掌 握 预 加 载 和 缓存 jQuery Mobile 页 面 。 
“掌握 jQuery Mobile 页 面 头 部 栏 。 

。 掌 握 jQuery Mobile 页 面 导航 栏 。 

。 掌 握 jQuery Mobile 页 面 尾部 栏 。 

。 掌 握 结 构 化 jQuery Mobile 页 面 内 容 。 


13.1 jQuery Mobile 页 面 结构 


创建 jQuery Mobile 页 面 必须 符合 HTML 5 文件 规范 ， 因 为 jQuery Mobile 页 面 的 许多 功能 效果 都 需要 
借助 于 HTML 5 的 新 增 标签 和 属性 , 并 且 在 文档 的 <head> 标 签 中 需要 依次 加 载 jQuery Mobile 的 CSS 样式 
表 文 件 、jQuery 框架 文件 和 jQuery Mobile 插件 文件 。 


13.1.1 jQuery Mobile 页 面 的 基本 架构 


在 jQuery Mobile 中 ， 一 个 基本 的 页 面 架构 ， 就 是 在 页 面 中 将 一 个 <div> 标 签 添加 data-role 属性 ， 属 性 
设置 为 page， 使 该 div 形成 一 个 容器 ， 而 在 这 个 容器 中 又 有 3 个 子 容器 ， 也 是 3 个 <div> 标 签 ， 也 分 别 添加 
data-role 属性 ， 属 性 值 分 别 为 header、content、footer， 这 样 就 形成 了 头 部 、 内 容 和 尾部 3 部 分 组 成 的 基本 
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页 面 架 构 。 下 面 代码 就 是 一 个 jQuery Mobile 页 面 的 基本 架构 。 
【 例 13-1】 实例 文件 ，ch13\Chap13.1.html)〉jQuery Mobile 页 面 结构 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 页 面 的 基本 结构 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<h1> 头 部 </h1> 
</div> 
<div data-role="main"> 
<p> 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
2 lewiocalhosvcyUser: 实 匠 500se ]】 
</html> 2 


相关 的 代码 实例 可 参考 Chap13.1.html 文件 ， 在 [时 
Opera Mobile 模拟 器 中 的 显示 效果 如 图 13-1 所 示 。 Se 

在 上 面 的 代码 中 , 为 了 更 好 地 支持 HTML 5 的 新 增 
功能 与 属性 ， 第 一 行 以 HTML 5 的 声明 文档 开始 。 

在 <head> 标 签 中 新 增 如 下 代码: 


<meta name="viewport" content="width=device- 
width, initial-scale=]1"> 

















@ operaMo.， 一 口 x 

















添加 这 行 代码 的 作用 : 设置 移动 设备 中 浏览 器 缩放 
的 宽度 与 等 级 。 通 常情 况 下 ， 移 动 设备 的 浏览 器 默认 宽 
度 显示 页 面 ， 这 种 宽度 会 导致 屏幕 缩小 ， 页 面 放大 ， 不 
合 浏览 。 添 加 了 这 行 代码 ， 可 以 使 页 面 的 宽度 与 移动 
设备 的 屏幕 宽度 相同 ， 更 加 适合 用 户 浏览 。 
在 这 个 基本 页 面 中 ， 头 部 、 内 容 和 尾部 这 3 部 分 存在 与 否 都 是 可 选 的 。 在 页 面 中 这 3 部 分 主要 编写 内 
容 如 表 13-1 所 示 。 
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13-1 jQuery Mobile 页 面 结构 























表 13-1 页 面 结构 


页 面 结构 编写 内 容 


在 页 面 的 头 部 建立 导航 工具 栏 , 用 于 放置 标题 和 按钮 (典型 的 至 少 要 放 一 个 “ 返 
可 ”按钮 ， 用 于 返回 前 一 页 )。 通 过 添加 额外 的 属性 data-position="fixed", 可 
以 保证 头 部 始终 保持 屏幕 的 项 部 


包含 一 些 主要 内 容 ， 例 如 文本 内 容 、 图 像 、 按 钮 、 列 表 、 表 单 等 


在 页 面 的 底部 创建 工具 栏 ， 添 加 一 些 功能 按钮 
为 了 确保 它 始终 保持 在 页 面 的 底部 ， 可 以 给 其 加 上 data-position="fixed" 属 性 

















<div data-role="header"> 头 部 </div> 

















<div data-role="content"> 内 容 </div> 





<div data-role="footer"> 尾 部 </div> 
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渴 13.1.2 多 容器 jQuery Mobile 页 面 


在 jQuery Mobile 中 , 当 一 个 HIML 可 以 包含 多 个 含有 data-role 属性 值 为 page 的 元 素 时 , 该 HTML 页 
就 是 多 容器 的 jQuery Mobile 页 面 。 容 器 之 间 各 自 独立 ， 每 个 容器 都 有 一 个 唯一 的 id 名 称 。 














= 














红 13.1.3 jQuery Mobile 页 面 间 的 链接 








jQuery Mobile 页 面 间 的 链接 有 两 种 情况 ， 一 种 是 同一 个 HTML 页 面 中 的 链接 ， 另 一 种 是 多 个 HTML 
间 的 链接 。 


1. 同一 个 HTML 页 面 中 的 链接 

同一 个 HTML 页 面 中 的 链接 就 是 多 容器 jQuery Mobile 页 面 间 的 链接 ， 通 过 设置 超 链接 <a> 标 签 的 href 
属性 值 为 “#+ 容 器 的 id 名 称 ” 单 击 超 链 接 时 ，jQuery Mobile 将 在 当前 的 HTML 页 面 中 寻找 相应 的 id 名 称 
的 容器 ， 实 现 容器 间 的 跳 转 。 

【 例 13-2】 (实例 文件 :ch13\Chap13.2.html) jQuery Mobile 同 页 面 间 的 链接 实例 。 代 码 如 下 ; 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="]jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<!-- 第 一 个 容器 ,id 名 称 为 pagel--> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<h1> 书 名 </h1l> 
</div> 
<div data-role="main"> 
<p> 第 一 页 的 内 容 </p> 
<p><a href="#page2"> 跳 转 到 第 二 页 </a></p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1> 
</div> 
</div> 
<!-- 第 二 个 容器 ,id 名 称 为 page2--> 
<div data-role="page" id="page2"> 
<div data-role="header"> 
<h1> 书 名 </h1l> 
</div> 
<div data-role="main"> 
<p> 第 二 页 内 容 </p> 
<p><a href="#pagel"> 返 回 第 一 页 </a></p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1> 
</div> 
</div> 
</body> 
</html> 














习 
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相关 的 代码 实例 可 参考 Chap13.2.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-2 所 示 ， 当 和 


忒 

















击 “ 跳 转 到 第 二 页 ”按钮 时 ， 将 跳 转 到 page2 容器 ， 如 图 13-3 所 示 。 


@operaMo. — OO x 
filey/iocaihosUCyUser: 去 轩 =ooos 


书 














@operaMo. 一 口 x 
Em 





名 
作 : 
和 和 NEP ba 局 团 - 
图 13-2 page1 容器 图 13-3 ”page2 容器 
注意 : 在 本 章 后 面 的 案例 中 ， 头 部 <head></head> 标 签 中 的 代码 都 是 一 样 的 ， 具 体 代码 如 下 : 


<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 


在 本 章 后 面 的 案例 中 ， 就 省 略 不 写 了 。 


2. 多 个 HTML 页 面 间 的 链接 
虽然 在 一 个 页 面 中 ， 可 以 实现 多 种 页 面 显示 的 效果 ， 但 是 把 全 部 代码 写 在 同一 个 HTML 页 面 中 会 延缓 
页 面 加 载 的 时 间 ， 使 代码 匈 余 ， 且 不 利于 功能 的 分 工 和 后 期 的 维护 。 因 此 ， 在 jQuery Mobile 中 ， 可 以 开发 
多 个 HTML 页 面 ， 使 用 超 链接 方式 实现 页 面相 互 切换 效果 。 
新 建 两 个 HTML 页 面 ， 分 别 是 “多 页 面 的 链接 .html” 和 “外 部 链接 的 页 面 .html”。 
【 例 13-3】 《实例 文件 ，ch13\Chap13.3.html) jQuery Mobile 多 页 面 间 的 链接 实例 。 
“多 页 面 的 链接 .html” 文 件 中 的 代码 如 下 : 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<hl> 书 名 </h1l> 
</div> 
<div data-role="main"> 
<p> 第 一 章 的 内 容 </p> 
<p><a href=" 外 部 链接 的 页 面 .html”rel="external"> 总 目录 </a></p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1> 
</div> 




















加 
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</div> 
</body> 
“外 部 链接 的 页 面 .html” 文 件 中 的 代码 如 下 : 
<body> 
<div id="page" data-role="page"> 
<div data-role="header"> 


























<h1> 首 页 </h1> 
</div> 
<div data-role="content"> 
<h3> 目 录 内 容 </h3> 
<p><a href=" 多 页 面 的 链接 .html”rel="external"> 返 回首 页 </a></p> 
</div> 
<div data-role="footer"> 
<h1> 注 释 </h1> 
</div> 
</div> 
</body> 
相关 的 代码 实例 可 参考 Chap13.3.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-4 所 示 ， 当 单 
击 “ 总 目录 ”按钮 时 ， 将 跳 转 到 “外 部 链接 的 页 面 .html”， 显 示 效 果 如 图 13-5 所 示 。 
@@opoewo. - DO x @openMme. - OO x 
Gr Ce 
首页 
目录 内 容 
返回 首页 
注释 
和 局 
iG Ops oo pptatt [Fh] 50% = iG Ops 4eoao ppt: 21¢ [Gs] [50% = 
13-4 多 页 面 的 链接 13-5 ”外 部 链接 的 页 面 























这 里 使 用 了 超 链接 的 rel 属性 ， 设 置 该 属性 的 值 为 external， 该 页 面 将 脱离 jQuery Mobile 的 主页 环境 ， 
以 独自 打开 的 页 面 在 浏览 器 中 显示 。 








13.1.4 在 jQuery Mobile 页 面 中 实现 后 退 功能 


在 jQuery Mobile 中 实现 后 退 效 果 ， 有 两 种 方法 : 第 一 种 方法 是 在 头 部 header 中 添加 data-add-back-btn 
属性 ， 属 性 值 为 tue， 页 面 会 自动 添加 后 退 按钮 Back; 第 二 种 方法 是 使 用 超 链接 <a> 标 签 ， 在 该 标签 中 设置 
data-rel 属性 ， 属 性 值 为 back， 当 单 击 超 链接 时 ， 就 会 后 退 到 上 一 个 页 面 。 需 要 注意 的 是 ， 这 时 会 忽略 超 链 
接 的 href 属性 的 URL 值 ， 直 接 后 退 到 上 一 个 页 面 。 

【 例 13-4】 《实例 文件 :ch13\Chap13.4.html) 实现 后 退 功能 的 实例 。 代 码 如 下 : 


<body> 












































<div data-role="page" id="pagel"> 
<div data-role="header" > 
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<h1> 书 名 </h1> 
</div> 
<div data-role="main"> 
<p> 第 一 页 的 内 容 </p> 
<p><a href="#page2"> 跳 转 到 下 一 个 页 面 </a></p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1> 
</div> 
</div> 
<div data-role="page"” id="page2"> 
<!-- 第 一 种 方法 --> 
<div data-role="header”data-add-back-btn="true"> 
<h1> 书 名 </hl> 
</div> 
<div data-role="main" > 


<p> 第 二 页 内 容 </p> 


<!-- 第 二 种 方法 --> 
<p><a href="" data-rel="back"> 后 退 到 上 个 页 面 </a></p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap13.4.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-6 所 示 ， 当 单 
击 “ 跳 转 到 下 一 个 页 面 ”按钮 时 ， 将 跳 转 到 page2 容器 ， 显 示 效 果 如 图 13-7 所 示 。 
在 page2 容器 中 ， 当 单 击 Back 按钮 和 “后 退 到 上 个 页 面 ” 时 ， 都 可 以 后 退 到 上 个 页 面 。 


心 operaMo- — 口 x @ Opera Mo.. 一 口 x 


nieyoahosVcyuser 太 和 =s。 nieyiochoscyuser 太 轩 6005 





一 页 的 内 容 
| 路 转 到 下 一 个 页 面 


作者 


本 ”已 ”加 - 和 是 





LG Opti 480x80t ppl: 21¢ [Es |50% | LG opt 480x80 ppt 216 |D |50% ~ 


图 13-6 ”page1 容器 内 容 图 13-7 page2 容器 内 容 


注意 : 需要 把 jQuery Mobile 文件 中 的 images 文件 放 到 该 页 面目 录 下 ， 否 则 ，Back 按钮 中 的 Back 字符 
不 会 显示 ，jQuery Mobile 图 标 也 将 不 可 用 。 
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13.1.5 设置 后 退 按 钮 的 文字 


在 13.1.4 节 学 习 过 ， 在 头 部 header 中 添加 data-add-back-btn 属性 ， 可 以 在 头 部 左 侧 添 加 一 个 默认 名 为 
back 的 后 退 按钮 ， 可 以 通过 在 头 部 标签 中 添加 data-back-btn-text 属性 设置 默认 按钮 的 文字 。 
【 例 13-5】 实例 文件 ，ch13\Chap13.5.html) 设置 后 退 按钮 中 的 文字 。 代 码 如 下 : 


<body> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<h1> 书 名 </hl> 
</div> 
<div data-role="main"> 
<p> 第 一 页 的 内 容 </p> 
<p><a href="#page2"> 跳 转 到 第 二 页 </a></p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1> 
</div> 
</div> 








<div data-role="page" id="page2"> 
<div data-role="header" data-add-back-btn="true"> 
<h1> 书 名 </h1> 
</div> 
<div data-role="main"> 
<P> 第 二 页 内 容 </P> 
<p><a href="#page3"> 第 三 页 </a></p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1> 
</div> 
</div> 
<div data-role="page" id="page3"> 
<div data-role="header" data-add-back-btn="true" data-back-btn-text=" 上 一 页 "> 
<h1> 书 名 </h1l> 
</div> 
<div data-role="main" > 
<p> 第 三 页 内 容 </p> 
<p><a href="#pagel"> 返 回 第 一 页 </a></p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1> 
</div> 
</div> 
</body> 
相关 的 代码 实例 可 参考 Chap13.5.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-8 所 示 ， 当 单 
丘 “ 跳 转 到 第 二 页 ”按钮 时 ， 将 跳 转 到 page2 容器 ， 显 示 效 果 如 图 13-9 所 示 ， 当 单 击 “ 跳 转 到 第 三 页 ” 按 
钮 时 ， 将 跳 转 到 page3 容器 ， 显 示 效 果 如 图 13-10 所 示 。 
在 上 面 的 代码 中 ， 为 page2 容器 添加 了 data-add-back-btn="true" 属 性 设置 ， 所 以 在 头 部 左 侧 位 置 显 
示 默 认 的 back 后 退 按钮 。 在 page3 容器 中 ， 不 仅 添加 了 data-add-back-btn="true" 属 性 设置 ， 而 且 还 添加 了 


data-back-btn-text 属性 设置 ， 可 以 看 到 修改 后 的 按钮 文字 效果 。 
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@operaMo.. 一 口 X 人 @ opera Mo-， 一 口 x 


fieynocalhosvcsuser 克基 6005 fieyocaihosvcsUsen 克 革 500 】 


国 Opera Mo 一 口 ba 


tiesocainosucuser 克 芽 005 


和 局 团 
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图 13-8 page1 容器 图 13-9 page2 容器 图 13-10 page3 容器 


13.1.6 ”弹出 对 话 框 




















在 jQuery Mobile 页 面 中 实现 对 话 框 其 实 非常 简单 , 只 需要 在 指向 页 面 的 链接 元 素 中 添加 data-rel 属性 ， 
F 设 置 该 属性 值 为 dialog 即 可 。 单 击 该 链接 时 ， 打 开 的 页 面 将 以 一 个 对 话 框 的 形式 显示 在 浏览 器 中 。 单 击 
话 框 中 的 任意 链接 ， 打 开 的 对 话 框 将 自动 关闭 ， 并 退回 至 上 一 页 。 

打开 的 对 话 框 实际 上 是 一 个 page 容器, 所 以 可 以 通过 设置 data-transition 属性 值 , 选择 打开 对 话 框 时 页 
的 动画 效果 。 

【 例 13-6】〔 实 例文 件 ，ch13\Chap13.6.html》 弹 出 对 话 框 实例 。 代 码 如 下 : 


<body> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<h1> 书 名 </h1l> 
</div> 
<div data-role="main"> 
<p> 第 一 页 的 内 容 </p> 
<p><a href="#page2"” data-rel="dialog” data-transition="slidefade"> 跳 转 到 第 二 页 </a></p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1l> 
</div> 
</div> 
<div data-role="page" id="page2"> 
<div data-role="header"> 
<h1> 书 名 </h1l> 
</div> 
<div data-role="main" > 
<p> 第 二 页 内 容 </p> 
<p><a href="#pagel"> 返 回 第 一 页 </a></P> 
</div> 
<div data-role="footer"> 
<hl1> 作 者 </h1> 
</div> 
</div> 
</body> 
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相关 的 代码 实例 可 参考 Chap13.6.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-11 所 示 ， 当 单 
击 “ 跳 转 到 第 二 页 ”时 ， 将 跳 转 到 page2 容器 ， 如 图 13-12 所 示 。 








@operaMo. 一 口 x 


fle/ocainosucuser 克基 oe 


@opeaMo. — OO x 


fieynoalhosycyuser 太 轩 co0s 





> 人 .> 
图 13-11 page1 容器 图 13-12 page2 容器 


13.2” 预 加 载 和 缓存 jQuery Mobile 页 面 


在 移动 应 用 开发 中 , 要 注意 移动 端 浏 览 嚣 加载 速度 ,如果 加 载 过 慢 , 会 影响 用 户 的 体验 效果 。 在 jQuery 
Mobile 中 ， 为 了 加 快 页 面 的 访问 速度 ， 使 用 预 加 载 和 页 面 缓存 是 十 分 有 效 的 方法 。 


13.2.1 预 加 载 jQuery Mobile 页 面 


在 开发 移动 应 用 程序 时 ， 对 需要 链接 的 页 面 进行 预 加 载 是 十 分 有 必要 的 。 把 一 个 链接 的 页 面 设置 成 预 
加 载 方式 时 ， 在 当前 页 面 加 载 完成 之 后 ， 目 标 页 面 也 被 自动 加 载 到 当前 文档 中 ， 单 击 就 可 以 马上 打开 ， 大 
大 加 快 了 页 面 访问 的 速度 。 

在 jQuery Mobile 页 面 中 预 加 载 页 面 有 以 下 两 种 方法 。 

(1) 在 需要 预 加 载 的 超 链接 <a> 中 添加 data-prefetch="true" 属 性 类 别 ，jQuery Mobile 在 加 载 完成 当前 页 
面 后 将 自动 加 载 该 链接 元 素 所 指 的 目标 页 面 ， 即 href 属性 所 链接 的 页 面 。 代 码 如 下 : 

<a href=" 链 接 的 地 址 ”data-prefetch="true"></a> 

(2) 调用 JavaScript 代码 中 的 全 局 性 方法 $.mobile.loadPage0 预 加 载 指定 的 目标 HTML 页 面 ， 其 最 终 的 
效果 与 设置 元 素 的 data-prefetch 属性 一 样 。 


13.2.2 ”页 面 缓存 


在 jQuery Mobile 中 ， 可 以 通过 页 面 缓存 的 方式 将 访问 过 的 历史 内 容 写 入 页 面 文档 的 缓存 中 。 当 用 户 
新 访问 时 ， 不 需要 重新 加 载 ， 只 要 从 缓存 中 读 取 就 可 以 了 。 

在 jQuery Mobile 页 面 中 将 页 面 内 容 缓存 到 页 面 文档 中 有 以 下 两 种 方法 。 

(1) 在 需要 链接 页 面 的 元 素 中 添加 data-dom-cache="true" 属 性 类 别 ，data-dom-cache 属性 的 功能 是 将 对 
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应 的 元 素 内 容 写 入 缓存 中 
(2) 通过 JavaScript 代码 设置 一 个 全 局 性 的 jQuery Mobile 属性 类 别 $.mobile page.prototype.options. 
domCache="true"， 可 以 将 当前 文档 写 入 缓存 中 。 
【 例 13-7】 《实例 文件 :ch13\Chap13.7html) 页 面 缓存 。 代 码 如 下 : 
<body> 
<div data-role="page” data-dom-cache="true"> 
<div data-role="header" data-position="fixed"> 
<h1> 头 部 </h1> 
</div> 
<div data-role="main"> 
<p><a href=" 页 面 缓 存 的 内 容 .html”data-prefetch="true” rel="external"> 页 面 预 加 载 的 内 容 </a></p> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 
相关 的 代码 实例 可 参考 Chap13.7.html 文件 。 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-13 所 示 。 当 单 


击 “页 面 预 加 载 的 内 容 ” 按 钮 时 ， 将 跳 转 到 “页 面 缓存 的 内 容 ” 页 面 ， 如 图 13-14 所 示 。 


©@ opera Mo. 口 X @ opera Mo — 口 X 
fley/iocalhosUCyUser: 识 着 soose filewiocalhosuCyUser: 识 着 G00 ] 
页 面 





























预 加 载 的 内 ! 
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头 部 
窜 

必 邵 
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Bl - 和 和 加 


LG Opti 480x80 ppl: 216 [D3 50% > LG Opti 480x80! Ppl: 216 [D3 50% ~ 


13-13 “页 面 缓存 ”页 面 13-14 “页 面 缓存 的 内 容 ” 页 面 





13.3 jQuery Mobile 页 面 头 部 栏 


头 部 栏 是 移动 应 用 中 的 主题 内 容 ， 它 是 page 容器 中 的 第 一 个 元 素 , 最 多 有 两 个 按钮 ， 可 以 使 用 “ 回 退 ” 
按钮 ， 也 可 以 添加 表单 元 素 中 的 按钮 ， 并 可 以 通过 设置 相关 属性 控制 头 部 按钮 的 相对 位 置 。 


13.3.1 头 部 栏 的 基本 结构 


头 部 栏 由 标题 文字 和 按钮 组 成 ， 标 题 文 字 一 般 使 用 <h1> 一 <h6> 标 签 标记 ; 标题 文字 的 两 侧 可 以 分 别 放 
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置 一 个 按钮 ， 用 于 标题 中 的 导航 操作 。 在 jQuery Mobile 页 面 的 <div> 标 签 中 设置 data-role 属性 为 header， 
即 可 将 该 元 素 设置 为 jQuery Mobile 页 面 的 头 部 栏 。 
【 例 13-8】“〈 实 例文 件 ， chl3\Chap13.8.html) 头 部 栏 的 基本 结构 。 代 码 如 下 : 


<body> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<a href="#"> 按 钮 一 </a> 





























<h1> 头 部 栏 </h1> 
<a href="##"> 按 钮 二 </a> 
</div> 
</div> 
</body> 
移动 设备 上 的 浏览 器 分 辩 率 不 尽 相同 , 如 果 尺 寸 过 小 , 而 头 部 栏 
的 标题 内 容 又 很 长 时 ，jQuery Mobile 会 自动 调整 需要 显示 的 内 容 ， 


隐藏 的 内 容 以 “…” 的 形式 显示 在 头 部 栏 。 
相关 的 代码 实例 可 参考 Chap13.8.html 文件 ， 在 Opera Mobile 模 EID 
拟 器 中 预览 效果 如 图 13-15 所 示 。 名 头 部 栏 扫 李 = 


13.32 添加 按钮 图 13-15 头 部 栏 的 基本 结构 
2 


在 jQuery Mobile 中 ， 可 以 通过 以 下 3 种 方式 添加 按钮 
(1) 使 用 <button> 标 签 。 
(2) 使 用 <input> 标 签 。 
(3) 使 用 <a> 标 签 。 
在 头 部 栏 中 ， 通 常 使 用 <a> 标 签 添加 按钮 。 
【 例 13-9】 《实例 文件 : ch13\Chap13.9.html) 在 头 部 栏 中 添加 按钮 。 代 码 如 下 : 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<a href="#"” > 上 一 页 </a> 
<h1> 书 名 </h1l> 
<a href="#page2"” > 下 一 页 </a> 
</div> 
<div data-role="main"> 
<p> 第 一 页 的 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1> 
</div> 
</div> 
<div data-role="page" id="page2"> 
<div data-role="header"> 
<a href="#pagel” > 上 一 页 </a> 
<hl1> 书 名 </hl> 
<a href="#" > 下 一 页 </a> 
</div> 
<div data-role="main"> 
<p> 第 二 页 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1> 
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</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap13.9.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-16 所 示 ， 当 单 

















击 “ 下 一 页 ”按钮 时 ， 将 跳 转 到 第 二 页 内 容 ， 如 图 13-17 所 示 。 
@operaMo. 一 口 x OperaMo. 一 口 x 


fleyhocaihos/CyUser 广 年 ceos= fieyoahosCyuser 坟 置 <=s。 】 














和 局 团 - 和 已 团 - 


图 13-16 page1 容器 图 13-17 page2 容器 


在 上 面 的 代码 中 ， 在 头 部 栏 添加 了 两 个 按钮 ， 左 侧 为 “上 一 页 ”， 右 侧 为 “下 一 页 ”。 单 击 第 一 个 容器 
的 “下 一 页 ”按钮 会 跳 转 到 page2 容器 ;， 单 击 page2 容器 的 上 一 页 ， 会 跳 转 到 pagel 容器 。 

头 部 栏 中 的 按钮 链接 元 素 是 头 部 栏 的 首 个 元 素 ， 默 认 位 置 在 头 部 的 左 侧 ， 默 认 按钮 个 数 只 有 一 个 ， 如 
果 在 头 部 栏 添加 两 个 按钮 时 ， 左 侧 链 接 按钮 会 按 顺 序 保 留 第 一 个 ， 第 二 个 按钮 会 自动 放置 在 头 部 栏 右 侧 。 


13.3.3 ”设置 按钮 位 置 


当 在 头 部 栏 中 设置 一 个 按钮 时 ， 不 管 按钮 书写 的 位 置 在 哪里 ， 最 终 都 会 显示 在 头 部 栏 的 左 侧 。 如 果 想 
要 改变 按钮 的 位 置 ， 需 要 添加 新 的 类 别 属性 ui-btn-lef 和 ui-btn-right， 其 中 ui-btn-left 表示 按钮 在 头 部 栏 的 
左 侧 ，ui-btn-right 表示 按钮 在 头 部 栏 的 右 侧 。 

【 例 13-10】”《〔 实 例文 件 ，ch13\Chap13.10.html》 设 置 头 部 栏 中 按钮 的 位 置 。 代 码 如 下 : 


<body> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<h1> 书 名 </h1l> 
<a href="#page2" class="ui-btn-right"> 下 一 页 </a> 
</div> 
<div data-role="main"> 
<p> 第 一 页 的 内 容 </p> 
</div> 
<div data-role="footer"> 
<hl1> 作 者 </hl> 
</div> 
</div> 
<div data-role="page" id="page2"> 
<div data-role="header"> 
<a href="#pagel" class="ui-btn-left"> 上 一 页 </a> 
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<h1> 书 名 </h1> 
</div> 
<div data-role="main"> 
<p> 第 二 页 的 内 容 </p> 
</div> 
<div data-role="footer"> 
<h1> 作 者 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap13.10.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-18 所 示 ， 当 




















单 击 “ 下 一 页 ”按钮 时 ， 将 跳 转 到 第 二 页 内 容 ， 如 图 13-19 所 示 。 
@opeaMo. - 0O x 四 operaMo. - OO Xx 
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图 13-18 ”page1 容器 图 13-19 page2 容器 
ui-btn-right 属性 类 别 ， 在 头 部 栏 只 存在 一 个 按钮 时 ， 或 者 是 想 放 置 在 头 部 栏 右 侧 时 非常 好 用 。 





13.4 jQuery Mobile 页 面 导 航 栏 


在 jQuery Mobile 中 ， 专 门 为 导航 栏 提供 了 一 个 组 件 ， 使 用 在 <div> 标 签 中 添加 data-role="navbar" 属 性 
设置 ， 便 可 将 该 属性 设置 为 一 个 导航 栏 容器 。 在 导航 栏 容器 内 ， 通 过 <ul> 标 签 设置 导航 栏 的 各 子 类 导航 按 
钮 ， 导 航 栏 会 根据 子 类 导航 栏 按钮 的 数量 划分 空间 ， 但 是 一 行 中 最 多 放置 5 个 按钮 ， 超 出 的 按钮 将 另 起 一 
行 。 导 航 栏 中 的 按钮 可 以 引用 系统 的 图 标 ， 也 可 以 自 定义 图 标 。 


13.4.1 导航 栏 的 基本 结构 


导航 栏 由 一 组 水 平 排列 的 链接 组 成 ， 通 常设 置 在 头 部 和 尾部 。 导 航 栏 中 如 果 要 设置 某 个 子 类 导航 的 选 
中 状态 ， 只 需要 在 按钮 的 元 素 中 添加 ui-btn-active 类 别 属性 即 可 。 
【 例 13-11】 实例 文件 ，ch13\Chap13.11.html〉》 导 航 栏 的 基本 结构 。 代 码 如 下 : 
<body> 
<div data-role="page”" id="pagel"> 
<div data-role="header"> 


<h1> 欢 迎 来 到 我 的 水 果 店 </h1> 
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相关 的 代码 实例 可 参考 Chap13.11.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-20 所 示 ; 当 
单 击 “ 香 花 ” 按 钮 时 会 跳 转 到 page2 容器 ， 如 图 13-21 所 示 ， 当 单 击 “橘子 ”按钮 时 会 跳 转 到 page3 容器 ， 
如 图 13-22 所 示 。 

在 导航 栏 的 内 部 容器 中 ， 每 个 导航 按钮 的 宽度 都 是 一 样 的 ， 因 此 ， 每 增加 一 个 子 类 按钮 ， 都 会 将 原先 
按钮 的 宽度 按照 等 比例 的 方式 进行 等 分 。 
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和 局 团 - 


图 13-20 ”page1 容器 图 13-21 page2 容器 图 13-22 page3 容器 





13.4.2 “导航 栏 的 图 标 


给 导航 栏 中 的 子 类 链接 按钮 添加 图 标 ， 只 需要 在 对 应 的 <a> 元 素 中 添加 data-icon 属性 ， 并 在 jQuery 
Mobile 自 带 的 系统 图 标 集合 中 选择 一 个 图 标 名 作为 该 属性 的 值 ， 图 标的 默认 位 置 是 按钮 链接 文字 的 上 面 。 
data-icon 属性 值 对 应 的 图 标 效果 如 表 13-2 所 示 。 














表 13-2 data-icon 属性 值 以 及 对 应 的 图 标 效果 























属 性 值 属 性 值 标 效果 
action back © 
bars aITOW-U 

bullets arrow-d 

Video arrow-] 

comment aIIOW-T 

carat-r arTOW-U-T 

check arrow-u-] 

Carat-u Carat-r 

shop arrOW-d-T 

Search arrow-d-l 

plus audio 
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表 13-2 中 的 data-icon 属性 值 所 对 应 的 图 标 效果 , 不 仅 用 于 导航 栏 中 的 子 类 链接 按钮 , 也 适用 于 jQuery 
Mobile 页 面 中 的 各 类 按钮 。 
【 例 13-12】 〈 实 例文 件 ，ch13\Chap13.12.html) 设置 导航 栏 中 的 图 标 。 代 码 如 下 ;: 


<body> 
<div data-role="page"”id="pagel"> 
<div data-role="header"> 























<h1> 欢 迎 来 到 我 的 水 果 店 </h1> 
<div data-role="navbar"> 
<ul> 


<li><a href="#pagel"” data-icon="home"> 苹 果 </a></1i> 
<li><a href="#page2"” data-icon="star"> 香 燕 </a></1i> 
<li><a href="#page3” data-icon="grid"> 橘 子 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 苹 果 的 介绍 </p> 
</div> 
<div data-role="footer"> 
<h1> 我 的 底部 </h1> 
</div> 
</div> 
<div data-role="page" id="page2"> 
<div data-role="header"> 
<h1> 欢 迎 来 到 我 的 水 果 店 </h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#pagel” data-icon="home"> 苹 果 </a></1i> 
<li><a href="#page2"” data-icon="star"> 香 蕉 </a></1i> 
<li><a href="#page3"” data-icon="grid"> 橘 子 C</a></1i> 
</ul> 
</div> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 香 燕 的 介绍 </p> 
</div> 
<div data-role="footer"> 
<h1> 我 的 底部 </h1> 
</div> 
</div> 
<div data-role="page" id="page3"> 
<div data-role="header"> 


<h1> 欢 迎 来 到 我 的 水 果 店 </h1> 
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<div data-role="navbar"> 
<ul> 
<li><a href="#pagel"” data-icon="home"> 革 果 </a></1i> 
<1i><a href="#page2”data-icon="star"> 香 茵 </a></1i> 
<li><a href="#page3"” data-icon="grid"> 橘 子 </a></1i> 
</ul> 
</div> 
</div> 
<div data-role="main" class="ui-content"> 
<p> 权 子 的 介绍 </p> 
</div> 
<div data-role="footer"> 
<h1> 我 的 底部 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap13.12.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-23 所 示 。 当 








单 击 “ 香 燕 ” 按 钮 时 会 跳 转 到 page2 容器 ， 如 图 13-24 所 示 。 
@operaMo.. — 口 x 四 operaMo-， 一 口 X 
ED GD 
欢迎 来 到 我 的 … 欢迎 来 到 我 的 .… 
~ 器 加 一 二 已 硬 - 
图 13-23 page1 容器 图 13-24 page2 容器 
昌 13 4.3 ”设置 导航 栏 图 标的 位 置 








出 


导航 栏 图 标的 位 置 默认 是 在 上 方 ， 如 果 需 要 改变 图 标的 位 置 ， 可 以 在 导航 栏 容器 元 素 中 添加 
data-iconpos 属性 。data-iconpos 属性 有 top、bottom、left 和 right 4 个 属性 值 ， 分 别 表示 图 标 在 文字 的 上 方 、 
下 方 、 左 边 和 右边 。 
【 例 13-13】 《实例 文件 : ch1l3\Chap13.13.html) 设置 导航 栏 中 图 标的 位 置 。 代 码 如 下 : 


<body> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<h1> 欢 迎 来 到 我 的 水 果 店 </h1> 
<div data-role="navbar" data-iconpos="left"> 
<ul> 
<li><a href="#pagel” data-icon="home"> 蔷 果 </a></1i> 
<1i><a href="#page2”data-icon="star"> 香 茵 </a></1i> 
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相关 的 代码 实例 可 参考 Chap13.13.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-25 所 示 。 当 
单 击 “ 香 蕉 ”按钮 会 跳 转 到 page2 容器 ， 导 航 栏 图 标 在 文字 下 方 ， 如 图 13-26 所 示 ， 当 单 击 “ 橘 子 ” 按 钮 
时 会 跳 转 到 page3 容器 ， 导 航 栏 图 标 在 文字 的 右边 ， 如 图 13-27 所 示 。 





FN 
HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 
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四 opeavmo. - 口 x 

Ge [ewe Ge 
欢迎 吝 到 我 的 . 歼 名 来 到 我 的 欢迎 来 到 我 的 .. 

sm ©O sn PS :EI: -0 wu ORT 
我 的 底部 我 的 居 部 

和 > 和 总 * 
LG ops 4a0xa0 ppt 21€ 四 |50% LG Opt as0xa0 ppl: 21¢ [Gs] SO% ltG Opti a80x80 ppl: 21 [Bs] |50% 
13-25 ”page1 容器 13-26 ”page2 容器 13-27 page3 容器 


13.5 jQuery Mobile 页 面 尾部 栏 


尾部 栏 和 头 部 栏 都 属于 jQuery Mobile 页 面 中 的 工具 栏 ， 两 者 的 结构 差不多 ， 区 别 在 于 尾部 栏 更 加 灵 
活 ， 它 在 jQuery Mobile 页 面 中 更 具有 功能 性 和 可 变性 ， 可 以 添加 更 多 的 按钮 和 表单 元 素 。 


13.5.1 添加 按钮 


在 尾部 栏 中 ,通常 需要 在 按钮 的 外 围 添 加 一 个 data-role 属性 值 为 controlgroup 的 容器 ,形成 一 个 按钮 组 。 
同时 还 可 以 在 该 容器 中 添加 data-role 属性 ， 属 性 值 为 horizontal， 使 按钮 按 水 平顺 序 排列 。 

【 例 13-14】 〈 实 例文 件 : ch13\Chap13.14.html) 尾部 栏 添加 按钮 实例 。 
代码 如 下 : dienes 


aa GD 


<div data-role="page" id="page"> 
<div data-role="header"> 欢迎 来 到 我 的 … 
<h1> 欢 迎 来 到 我 的 水 果 店 </h1> 
</div> 水 果 介绍 
<div data-role="main" class="ui-content"> 
<p> 水 果 介绍 </p> 
</div> 
<div data-role="footer"> 
<div data-role="controlgroup" data-type="horizontal"> 
<a href="#" data-role="button" data-icon="home"> 店 铺 介绍 </a> 
<a href="#" data-role="button" data-icon="star"> 买 家 帮助 </a> 
<a href="#" data-role="button” data-icon="grid"> 联 系 我 们 </a> 
</div> 
</div> 
</div> 


</body> 和 局面 - 
相关 的 代码 实例 可 参考 Chap13.14.html 文件 ， 在 Opera Mobile 模拟 器 中 


览 衣 -28 所 示 。 
预览 效果 如 图 13-28 所 示 图 13-28 ”尾部 栏 添加 按钮 




















店铺 介绍 买 表 雨 助人) 联系 我 人 


十 
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13.5.2 ”添加 表单 元 素 


在 尾部 栏 中 ， 可 以 添加 表单 元 素 ， 如 <text><select> 等 。 在 尾部 栏 中 添加 ui-bar 类 别 属性 ， 可 以 使 增加 的 
表单 元 素 间 保持 一 定 的 距离 。 添 加 data-position 属性 ， 属 性 值 为 mline， 用 于 统一 设 定 表 单元 素 的 显示 位 置 。 
【 例 13-15】〔 实 例文 件 ，ch13\Chap13.15.html)〉 尾 部 栏 添加 表单 元 素 实例 。 代 码 如 下 : 
<body> 
<div data-role="page” id="page"> 
<div data-role="header"> 
<h1> 欢 迎 来 到 我 的 水 果 店 </h1> 


</div> 
<div data-role="main" class="ui-content"> 
<p> 水 果 介绍 </p> 
</div> 
<div data-role="footer" class="ui-bar" data-position="inline"> 
<label for="link"> 水 果 链 接 </label> 
<select name="link" id="link"> 
<option value="0"> 请 选择 </option> 
<option value="1"> 苹 果 </option> 
<option value="2"> 梨 子 </option> 
<option value="3"> 香 菩 </option> 
<option value="4"> 橘 子 </option> 
</select> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap13.15.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-29 所 示 。 当 
击 表单 元 素 时 ， 显 示 效果 如 图 13-30 所 示 。 


@opern Mo — 0 x 


fieyiocalnosucruser 太 芽 6004 


欢迎 来 到 我 的 … 
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bs) 
图 13-29 ”表单 页 面 图 13-30 单 击 表单 元 素 后 的 效果 


LG op 480x80! ppt: 21¢ [| [50% ~ 








13.6 ”结构 化 jQuery Mobile 页 面 内 容 


jQuery Mobile 中 提供 了 多 列 的 网 格 布局 和 可 折 芭 区 块 等 工具 ,使 用 这 些 工具 可 以 快速 对 jQuery Mobile 
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页 面 的 正文 区 域 进行 格式 化 处 理 。 


jQuery Mobile 网 格 布局 


jQuery Mobile 提供 了 一 套 CSS 样式 实现 jQuery Mobile 页 面 中 内 容 的 网 格 布局 。 该 样式 有 4 种 预 设 的 
配置 布局 :ui-grid-a、ui-grid-b、ui-grid-c、ui-grid-d， 分 别 对 应 于 两 列 、 三 列 、 四 列 、 五 列 网 格 布局 形式 。 
使 用 网 格 布局 时 ， 整 个 宽度 为 100%， 没 有 边框 、 背 景 、 边 距 和 填充 。 

【 例 13-16】 《实例 文件 ， chl13\Chap13.16.html) jQuery Mobile 网 格 布局 实例 。 代 码 如 下 : 

<body> 

<div data-role="page"> 

<div data-role="header" data-position="fixed"> 
<h1> 头 部 </h1> 
</div><br/> 
<div data-role="main"> 
<div class="ui-grid-solo"> 
<div class="ui-block-a"> 
<div class="ui-bar ui-bar-a"> 一 列 布 局 </div> 




































































</div> 

</div><br/> 

<div class="ui-grid-a"> 
<div class="ui-block-a"> 





<div class="ui-bar ui-bar-a"> 二 列 布局 </div> 
</div> 
<div class="ui-block-b"> 

<div class="ui-bar ui-bar-a"> 二 列 布局 </div> 


</div> 

</div><br/> 

<div class="ui-grid-b"> 
<div class="ui-block-a"> 





<div class="ui-bar ui-bar-b"> 三 列 布局 </div> 
</div> 
<div class="ui-block-b"> 

<div class="ui-bar ui-bar-b"> 三 列 布局 </div> 
</div> 
<div class="ui-block-c"> 

<div class="ui-bar ui-bar-b"> 三 列 布局 </div> 


</div> 

</div><br/> 

<div class="ui-grid-c"> 
<div class="ui-block-a"> 





<div class="ui-bar ui-bar-c"> 四 列 布局 </div> 
</div> 
<div class="ui-block-b"> 
<div class="ui-bar ui-bar-c"> 四 列 布局 </div> 
</div> 
<div class="ui-block-c"> 
<div class="ui-bar ui-bar-c"> 四 列 布局 </div> 
</div> 
<div class="ui-block-d"> 
<div class="ui-bar ui-bar-c"> 四 列 布局 </div> 
</div> 
</div><br/> 
<div class="ui-grid-d"> 
<div class="ui-block-a"> 
<div class="ui-bar ui-bar-d"> 五 列 布局 </div> 
</div> 
<div class="ui-block-b"> 
<div class="ui-bar ui-bar-d"> 五 列 布局 </div> 
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</div> 
<div class="ui-block-c"> 

<div class="ui-bar ui-bar-d"> 五 列 布局 </div> 
</div> 
<div class="ui-block-d"> 

<div class="ui-bar ui-bar-d"> 五 列 布局 </div> 
</div> 
<div class="ui-block-e"> 

<div class="ui-bar ui-bar-d"> 五 列 布局 </div> 
</div> 


























</div> 【sooge 
</div> pe 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1l> 一 列 布局 
</div> 
</div> 二 列 布局 二 列 布局 
</body> 
相关 的 代码 实例 可 参考 Chap13.16.html 文件 , 在 Opera Mobile ee Be Ee 
模拟 器 中 预览 效果 如 图 13-31 所 示 。 Es gn Ew Ee 
从 上 面 的 代码 中 可 以 看 到 ， 要 创建 一 个 多 列 网 格 布局 ， 就 要 en 
先 通过 <div> 构 建 1 个 容器 ， 如 果 是 两 列 ， 将 为 容器 添加 class 属 布局 布局 。 布局 。 布局 。 布 同 
性 值 为 ui-grid-a, 并 给 2 个 子 容器 分 别 添加 ui-block-a 和 ui-block-b 局 部 
的 类 样式 ， 如 果 是 三 列 ， 将 为 容器 添加 class 属性 值 为 ui-grid-b， 
并 给 3 个 子 容器 分 别 添加 ui-block-a、ui-block-b 和 ui-block-c 的 类 Sop samenl pn 214 ER) Ens 
样式 ， 其 他 的 依次 类 推 。 13-31 网 格 布局 


13.6.2 ”可 折 靶 区 块 
可 折 苔 区 块 允 许 隐 藏 和 显示 内 容 。 在 jQuery Mobile 页 面 中 创建 可 折叠 区 块 ， 代 码 如 下 : 


<div data-role="collapsible"> 











<h3></h3> 
<p></p> 

</div> 

在 上 面 的 代码 中 ， 首 先 创建 了 一 个 <div> 容 器 ， 将 该 <div> 容 器 的 data-role 属性 值 设置 为 collapsible， 表 








示 该 容器 是 一 个 可 折 县 区 块 。 在 容器 中 添加 <h1> 一 <h6> 中 的 一 个 标签 ， 根 据 需要 设置 。 该 标签 以 按钮 的 形 
式 展示 ， 按 钮 的 左 侧 有 一 个 “+” 号 ， 表 示 该 标题 可 以 展开 。 在 标题 的 下 方 放置 需要 折 胎 显示 的 内 容 ， 通 常 
使 用 <p> 段 落 标签 。 当 用 户 单 击 标题 中 的 “+” 号 时 ， 显 示 <p> 标 签 中 的 内 容 ， 标 题 左 侧 的 “+” 号 变 成 “一 ” 
号 ， 再 次 单 击 时 ， 隐 藏 <p> 标 签 中 的 内 容 ， 标 题 左 侧 的 “一 ”号 变 成 “+” 号 。 
【 例 13-17】 实例 文件 ，ch13\Chap13.17.html》 可 折 芭 区 块 实例 。 代 码 如 下 : 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 头 部 </h1> 
</div> 
<div data-role="main"> 
<div data-role="collapsible"> 
<h3> 店 铺 介绍 </h3> 
<p style="text-indent:2em"> 
夏天 水 果 综 合 网 上 购物 商城 ,正品 保证 ,全 国联 保 , 100 个 城市 本 店 半 日 即 可 送 达 ! 本 店 易 购 ,正品 保障 ,支持 
货 到 付款 ,24 小 时 夏天 水 果 为 您 提供 不 间断 的 优质 服务 ! 


</p> 
</div> 
































303 





NN 
HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 
NY 


</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1l> 
</div> 
</div> 
</body> 


在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-32 所 示 。 当 证 
如 图 13-33 所 示 。 

















趟 
外 











标题 “店铺 介绍 ”按钮 时 ， 页 而 























显示 效果 


OperaMo.. 一 口 x @operaMo. 一 口 这 


全 店铺 介绍 


夏天 水 果 综 合 网 上 购物 丙 城 正品 保 
证 全 国联 保 , 100 个 城市 本 店 半日 邹 可 送 
达 ! 本 店 易 购 .正品 保障 , 支持 货 到 付款 ,24 
小 时 夏天 水 果 为 您 提供 不 同 断 的 优质 服 

务 ! 


已 团 


13-32 可 折叠 区 块 


器 团 - 
LG Opti 480x8ok Ppl: 21¢ [G3 [50% 


13-33” 单 击 标题 后 页 面 
在 可 折 营 容器 中 设置 data-collapsed 属性 值 为 tue， 表 示 标 题 下 的 内 容 是 隐藏 的 ， 这 也 是 可 折 释 区 块 的 
默认 效果 ; 设置 data-collapsed 属性 值 为 false， 表 示 标 题 下 的 内 容 是 显示 的 ， 即 可 折 芭 区 块 是 展开 的 。 


当 13.6.3 ”可 折 又 区 块 的 戏 套 


在 jQuery Mobile 页 面 中 可 以 对 可 折 县 区 块 进行 嵌 套 ， 在 一 个 折 县 区 块 的 内 容 中 再 添加 折 县 区 块 ， 以 此 
类 推 。 建 议 这 种 绕 套 不 要 超过 2 层 ， 否 则 用 户 体验 比较 差 。 
【 例 13-18】〗 〈 实 例文 件 ， chl3\Chap13.18.html) 可 折 营 
<body> 
<div data-role="page"> 





























区 块 嵌 套 实例 。 代 码 如 下 ; 


可 


<div data-role="header" data-position="fixed"> 
<h1> 头 部 </h1> 
</div> 
<div data-role="main"> 
<div data-role="collapsible"> 
<h3> 店 铺 介绍 </h3> 
<p style="text-indent:2em"> 
夏天 水 果 综 合 网 上 购物 商城 ,正品 保证 , 全 国联 保 ， 
100 个 城市 本 店 半日 即 可 送 达 ! 本 店 易 购 ,正品 保障 ， 


支持 货 到 付款 ,24 小 时 夏天 水 果 为 您 提供 不 间断 的 优质 服务 ! 
</p> 


<div data-role="collapsible"> 
<h4> 联 系 方式 </h4> 
<p> 老 板 手机 :13312345678</p> 


<p> 店 铺 座 机 :010-12345678</p> 
</div> 


304 


第 国 章 jQuery Mobile 页 面 









































</div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1l> 
</div> 
</div> 
</body> 
相关 的 代码 实例 可 参考 Chap13.18.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-34 所 示 。 当 
单 击 标题 “店铺 介绍 ”按钮 时 ， 页 面 显示 效果 如 图 13-35 所 示 ; 然后 在 显示 的 内 容 中 再 单 击 第 2 个 标题 “ 联 
系 方式 ”按钮 ， 页 面 显示 效果 如 图 13-36 所 示 。 
CE 【so0se J ooose 
头 那 头 部 六 部 
中 店铺 介绍 


© 上 介绍 人 店铺 介绍 


夏天 水 果 捧 言 网 上 购物 商城 正品 保 可 天 水 果 综合 网 上 购物 商城 正品 保 
证 全 国联 保 , 100 个 着 市 本 庄 半日 即 可 送 证 全 国联 保 , 100 个 城市 本 店 半日 即 可 进 
这 ! 本 后 易 购 正品 保障 , 支持 货 到 付 寺 达 ! 本 店 易 购 .正品 保障 , 支持 货 到 付款 ,24 
小 时 夏天 水 时 为 您 提供 不 间断 小 时 夏天 水 果 为 您 提供 不 辣 断 的 优质 服 





》 联 系 方式 © 联系 方式 


老 拍 手机 - 13312345678 


店 角 座 机 ; 010-12345678 
尾部 尾部 尾部 
和 口 硬 - 和 局 夯 - 和 > 
LG op 480x80 Ppt: 21¢ 区 | |50% ~ LG opi 480x30 ppl: 21¢ [Es] 50% ~ LG Opti 48030 PP 21 [Es] [50% 
图 13-34 可 折叠 区 块 13-35 “店铺 介绍 ”显示 内 容 13-36 “联系 方式 ”显示 内 容 


13.6.4 可 折 琶 区 块 组 


可 折 营 区 块 可 以 形成 可 折 巷 

区 块 组 中 只 有 一 个 折 苔 区 块 是 展开 的 ， 当 展开 组 中 一 个 可 折 苔 区 块 时 ， 其 他 的 可 折 苔 区 块 将 会 关闭 。 

可 折 芝 区 块 组 是 将 多 个 折 芭 区 块 放置 在 一 个 <div> 容 器 中 ， 并 给 该 容器 中 添加 data-role="collapsible-set" 
属性 类 别 。 
































【 例 13-19】《〔 实 例文 件 ，ch13\Chap13.19.html〉 可 折 芭 区 块 组 实例 。 代 码 如 下 : 
<body> 


<div data-role="page"> 





<div data-role="header" data-position="fixed"> 
<h1> 头 部 </h1> 

</div> 

<div data-role="main"> 
<div data-role="collapsible-set"> 


<div data-role="collapsible" data-collapsed="false"> 
<h3> 苹 果品 种 </h3> 


<P > 过 南 寒 富 </p> 
<p > 山东 红星 </p> 
<p > 山西 万 荣 </p> 
</div> 
<div data-role="collapsible"> 
<h3> 香 莱 品 种 <C/h3> 
<p > 仙人 莱 </P> 
<p > 西贡 莱 </P> 
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<p > 天 宝 茹 </P> 
</div> 
<div data-role="collapsible"> 
<h3> 橘 子 品种 </h3> 
<p > 砂糖 桥 </p> 
<p > 皇帝 柑 </p> 
<p > 红 美 人 </p> 
</div> 
</div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap13.19.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 13-37 所 示 。 当 单 击 
可 折 功 组 中 其 他 可 折 匣 区 块 标题 时 ， 将 展开 该 区 块 并 隐藏 其 他 区 块 内 容 ， 显 示 效果 如 图 13-38、 图 13-39 所 示 。 
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图 13-37 可 折合 区 块 组 13-38 “香蕉 品种 ”区 块 内容 13-39 “橘子 品种 ”区 块 内 容 











13.7 “就业 面试 技巧 与 解析 
13.7.1 面试 技巧 与 解析 〈 一 ) 


面试 官 : 请 问 ， 如 何 架构 一 个 jQuery Mobile 基本 页 面 ? 

应 聘 者 : 在 jQuery Mobile 中 ， 一 个 基本 的 页 面 架构 ， 就 是 在 页 面 中 将 一 个 <div> 标 签 添加 data-role 属 
性 ， 属 性 设置 为 page， 使 该 div 形成 一 个 容器 ; 然后 在 这 个 容器 中 再 设置 3 个 子 容器 , 也 是 3 个 <div> 标 签 ， 
再 分 别 添加 data-role 属性 ， 属 性 值 分 别 为 header、content、footer， 这 样 就 形成 了 由 头 部 、 内 容 和 尾部 3 部 
分 组 成 的 基本 页 面 架构 。 
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13.7.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : 在 jQuery Mobile 页 面 开发 中 , 请 简单 地 谈 一 下 , 是 把 所 有 的 内 容 放 到 一 个 页 面 的 多 个 容器 


还 是 把 所 有 内 容 分 开放 在 多 个 页 面 中 ， 哪 一 种 比较 好 ? 





中 ， 














疆 





a 





应 聘 者 : 如 果 是 简单 的 网 页 内 容 ， 可 以 考虑 把 所 有 内 容 放 到 一 个 页 面 的 多 个 容器 中 ;但 是 如 果 页 





构 很 复杂 ， 跳 转 页 面 比较 多 的 情况 下 ， 就 会 显得 很 腑 有 种， 显然 会 增加 维护 的 复杂 度 。 而 把 所 有 内 容 分 开放 











在 多 个 页 面 中 ， 比 较 适合 页 面 结构 ， 且 很 多 情况 下 更 易于 维护 。 但 两 种 方式 在 性 能 上 没有 明显 的 差异 。 
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第 14 
jQuery 


上 
是 
Mobile 页 面 组 件 


二 学 习 指引 


在 jQuery Mobile 中 提供 了 许多 常用 的 组 件 ， 包 括 按钮 组 件 、 列 表 组 件 和 各 种 类 型 的 表单 组 件 等 。 灵 活 
地 运用 这 些 组 件 ， 才 可 以 使 我 们 在 jQuery Mobile 移动 应 用 开发 设计 中 得 心 应 手 。 


”重点 导读 


。 掌 握 jQuery Mobile 按钮 组 件 创建 和 使 用 方法 。 
。 掌 握 jQuery Mobile 列表 组 件 创建 和 使 用 方法 。 
。 掌 握 jQuery Mobile 表单 组 件 创建 和 使 用 方法 。 


14.1 jQuery Mobile 按钮 组 件 








在 jQuery Mobile 中 按钮 由 以 下 两 种 元 素 形成 : 

(1) 超 链接 <a> 标 签 元 素 ， 在 <a> 标 签 中 添加 data-role="button" 属 性 设置 ，jQuery Mobile 便 会 自动 为 该 
元 素 添加 相应 的 样式 外 观 ， 形 成 可 单 击 的 按钮 形状 。 

(2) 在 表单 中 的 <input> 标 签 中 设置 type 属性 ， 属 性 值 可 以 是 submit、reset、button 或 image， 都 会 形 
成 相应 的 按钮 表单 元 素 。 


14.1.1 内 联 按钮 


在 jQuery Mobile 中 ， 按 钮 元 素 默认 都 是 块 状 ， 并 且 自动 填充 页 面 宽度 。 如 果 想 要 取消 默认 效果 ， 可 以 


在 按钮 的 元 素 























添加 data-role="button" 属 性 类 别 ， 该 按钮 将 会 根据 其 内 容 中 文字 和 图 片 的 宽度 自动 进行 缩 











放 ， 形 成 一 个 紧凑 的 按钮 。 








如 果 想 要 将 缩放 后 的 按钮 在 同一 行 显示 ， 那 么 可 以 在 多 个 按钮 的 外 层 增加 一 个 <div> 容 器 ， 在 该 容器 中 


设置 data-inline 
行 显 示 。 





属性 值 为 tue, 这 样 就 可 以 使 容器 中 的 按钮 样式 自动 缩放 至 最 小 宽度 , 并且 以 浮动 效果 在 一 
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【 例 14-1】 实例 文件 ，ch14\Chap14.1.html》 内 联 按钮 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 内 联 按钮 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 头 部 </h1> 
</div> 
<div data-role="main"> 
<p> 确 定 要 提交 你 的 信息 吗 ?</p> 
<div data-role="ui-grid-a"> 
<div class="ui-block-a"> 
<a href="#" data-role="button"” class="ui-btn-active"> 确 定 </a> 





</div> 
<div class="ui-block-b"> st 
<input type="button” value=" 取 消 "> 和 
时 
</div> ed 
<div data-role="footer" data-position="fixed"> 网 定 要 提交 你 的 信息 吗 ? 
<hl1> 尾 部 </h1l> 
</div> 四 取消 
</div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap14.1.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 
效果 如 图 14-1 所 示 。 








注意 : 在 本 章 后 面 的 案例 中 ， 头 部 <head></head> 标 签 中 的 代码 都 是 一 样 的 ， 2 
具体 如 下 : as 已 到 
<head> LG ops 480x8o Ppt 21¢ [Gs] [50% 一 
<meta charset="UTF-8"> 14-1 内 联 按钮 


<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 


在 本 章 后 面 的 案例 中 ， 我 们 就 省 略 不 写 了 。 


14.1.2 ”按钮 组 


jQuery Mobile 中 可 以 将 多 个 按钮 放 入 按钮 组 容器 。 按钮 组 是 添加 了 data-role="controlgroup" 属 性 类 别 的 
<div> 容 器 。 默 认 情 况 下 ， 按 钮 组 是 以 垂直 方向 展示 一 组 按钮 列表 ， 可 以 通过 给 按钮 组 容器 添加 data-type 
属性 来 修改 按钮 组 默认 的 显示 方式 。 

【 例 14-2】〔 实 例文 件 ，ch14\Chap14.2.html》 按 钮 组 实例 。 代 码 如 下 : 

<body> 


<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
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<h1> 头 部 </h1> 
</div> 
<div data-role="main"> 
<p> 确 定 要 提交 你 的 信息 吗 ?</p> 
<div data-role="controlgroup"> 
<a href="#" data-role="button” class="ui-btn-active"> 确 定 </a> 
<input type="button”value=" 取 消 "> 
</div> 
<p> 确 定 要 提交 你 的 信息 吗 ?</p> 
<div data-role="controlgroup" data-type="horizontal"> 
<a href="#" data-role="button"” class="ui-btn-active"> 确 定 </a> 
<input type="button”value=" 取 消 "> 
</div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap14.2.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 效 
果 如 图 14-2 所 示 。 


14.2 jQuery Mobile 列表 组 件 





@opereMe. — 0O x 
TT GOD 
头 邵 


| 十 要 二 交集 的 信息 吗 7 


全 定 要 提交 作 的 信息 吗 > 








is Opti 48oxeot Ppt: 21¢ [Be] [50% = 


14-2 ”按钮 组 


在 jQuery Mobile 中 的 列表 是 标准 的 HTML 列表 ， 分 为 有 序 和 无 序列 表 。 如 果 在 <ul> 标 签 中 添加 
data-role="listview" 属 性 ， 那 么 就 可 以 创建 一 个 无 序列 表 ， 并 且 将 会 使 用 jQuery Mobile 的 默认 样式 对 列表 进 
行 泻 染 显 示 。 默 认 情况 下 jQuery Mobile 页 面 中 的 列表 宽度 与 屏幕 进行 等 比例 缩放 ， 在 列表 选项 的 最 右 侧 显 








示 一 个 带 箭头 的 图 标 。 


14.2.1 基本 列表 





在 jQuery Mobile 中 ，<ul> 元 素 一 旦 被 定义 为 列表 , jQuery Mobile 将 会 使 用 默认 的 样式 对 该 列表 进行 泻 
染 显 示 。 列 表 中 各 选项 右 侧 的 圆 形 箭头 图 标 是 用 来 提示 用 户 该 选项 有 链接 。 单 击 时 ， 通 过 跳 转 页 面 的 方式 





跳 转 到 各 选项 <a> 标 签 中 href 属性 所 设置 的 链接 页 面 中 。 
【 例 14-3】〔 实 例文 件 ，ch14\Chap14.3.html》 基 本 列表 实例 。 代 码 如 下 : 


<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 基 本 列表 </h1> 
</div> 
<div data-role="main"> 
<p> 水 果 列 表 </p> 
<ul data-role="listview"> 
<1i><a href="#"> 革 果 </a></1i> 
<1i><a href="#"> 橘 子 </a></1i> 
<1i><a href="#"> 香 燕 </a></1i> 
<1i><a href="#"> 草 莓 </a></1i> 
<li><a href="#"> 西 瓜 <C/a></1i> 
</ul> 
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</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap14.3.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 
效果 如 图 14-3 所 示 。 


14.2.2 ”有 序列 表 


使 用 <o 户 标签 可 以 创建 一 个 有 序列 表 。 在 有 序列 表 显 示 时 ，jQuery Mobile 
会 优先 使 用 CSS 样式 给 列表 添加 编号 。 

【 例 14-4】〔 实 例文 件 ，ch14\Chap14.4.html》 有 序列 表 实 例 。 代 码 如 下 : 

<body> 


<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 有 序列 表 </h1> 
</div> 
<div data-role="main"> 
<p> 水 果 列 表 </p> 
<ol data-role="listview"> 
<1i><a href="#"> 苹 果 </a></1i> 
<1i><a href="#"> 橘 子 C</a></1i> 
<1i><a href="#"> 香 基 </a></1i> 
<li><a href="#"> 草 莓 </a></1i> 
<1i><a href="#"> 西 瓜 <C/a></1i> 
</ol> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap14.1.html 文件 ,在 Opera Mobile 模拟 器 中 显示 
效果 如 图 14-4 所 示 。 


14.2.3 ”分 割 列 表 选 项 


























在 jQuery Mobile 列表 选项 中 ， 可 以 通过 在 <li> 标 签 中 再 添加 一 个 <a> 标 签 ， 在 页 面 中 实现 分 割 的 效果 ， 


这 样 就 可 以 对 内 容 进 行 不 同 的 操作 了 。 


分 割 后 的 两 部 分 通常 有 一 个 竖 直 的 分 割 线 ， 分 割 线 左 侧 为 缩短 长 度 后 的 选项 按钮 ， 右 侧 为 后 来 增加 的 
<a> 元 素 。 右 侧 的 <a> 标 签 显示 效果 只 是 一 个 带 图 标的 按钮 ， 可 以 通过 在 <ul> 标 签 中 设置 data-split-icon 属性 











的 值 ， 改 变 该 按钮 中 的 图 标 。 
【 例 14-5】 《实例 文件 ， chl4\Chap14.5.html) 分割 列表 选项 实例 。 代 码 如 下 : 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 分 割 列表 选项 </h1> 
</div> 
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14-3 ”基本 列表 
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14-4 ”有 序列 表 
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<div data-role="main"> 
<p> 水 果 列 表 </p> 
<ol data-role="listview"> 
<li><a href="#"> 芋 果 </a><a href="#"></a></1i> 
<li><a href="#"> 橘 子 </a><a href="#"></a></1i> 
<li><a href="#"> 香 莱 </a><a href="#"></a></1i> 
<1i><a href="##"> 草 莓 </a><a href="#"></a></1i> 
<1i><a href="#"> 西 瓜 </a><a href="#"></a></l1i> 
</o1> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 
相关 的 代码 实例 可 参考 Chap14.5.html 文件 ， 在 Opera Mobile 模拟 器 中 显 
示 效 果 如 图 14-5 所 示 。 


注意 : 目前 在 jQuery Mobile 中 ， 列 表 分 割 只 支持 分 割 成 两 部 分 ， 即 在 <li> 


加 14.2.4 ”对 列表 项 进行 分 类 














iG Opt +90x80 pph 21¢ [Gs |50% ~ 


图 14-5 ”分割 列表 选项 
元 素 中 ， 只 允许 有 两 个 <a> 标 签 ， 如 果 有 多 个 <a> 标 签 ， 会 将 最 后 一 个 <a> 元 素 作为 分 割 线 右 侧 部 分 。 











在 jQuery Mobile 页 面 列 表 中 ， 可 以 在 想 要 列表 分 组 的 位 置 增加 一 个 <li> 元 素 ， 并 在 该 <li> 元 素 添加 





data-role="list-divider" 属 性 类 别 ， 这 样 该 <li> 标 签 就 表示 是 一 个 分 组 列表 项 了 。 默 认 的 情况 下 ， 普 通 列表 项 


的 主题 色 为 “ 浅 灰色 ” 分 组 列表 项 的 主题 色 是 “灰色 ”。 
【 例 14-6】 “实例 文件 ， chl14\Chap14.6.html) 列表 分 类 实例 。 代 码 如 下 : 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 对 列表 项 进行 分 类 </h1> 


</div> 
<div data-role="main"> 
<p> 水 果 列 表 </p> 
<ul data-role="listview"> 
<li data-role="list-divider"><a href="#"> 苹 果 种 类 </a></1i> 
<1i><a href="#"”> 红 富士 </a></1i> 
<1i><a href="#"> 红 将 军 </a></1i> 
<1i><a href="#"> 乔 纳 金 </a></1i> 
<li data-role="1list-divider"><a href="#"> 香 匣 种 类 </a></1i> 
<1i><a href="#"> 大 种 高 把 </a></1i> 
<1i><a href="#"> 高 脚 顿 地 雷 </a></1i> 
<1li><a href="#"> 矮 脚 顿 地 雷 </a></1i> 
</ul> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 必 部 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap14.6.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 
效果 如 图 14-6 所 示 。 
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14.2.5 ”图 标 与 计数 器 


在 jQuery Mobile 中 ， 如 果 想 要 将 图 片 作为 列表 项 的 图 标 使 用 ， 那 么 需要 为 该 元 素 添加 类 别 属性 
ti-li-icon， 才 能 在 列表 的 左 侧 正 常 显示 该 图 标 。 如 果 想 在 列表 项 的 右 侧 添加 一 个 气泡 数字 ， 则 只 需要 添加 
一 个 <span> 标 签 ， 并 在 该 标签 中 添加 类 别 属性 wi-li-count 即 可 。 

【 例 14-7】 实例 文件 ，ch14\Chap14.7.html》 图 标 与 计数 器 实例 。 代 码 如 下 : 


<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 基 本 列表 </hl> 
</div> 
<div data-role="main"> 
<p> 水 果 列表 </p> 
<ul data-role="listview"> 
ei 
<a hrefe"#"> 
<img src="images/1.gif" class="ui-li-icon"> 
购买 苹果 的 重量 /kg 
<span class="ui-li-count">3</span> 
</a> 
</1i> 
> 
xa href="#"> 
<img src="images/2.gif" class="ui-li-icon"> 









































购买 香 节 的 重量 /kg 
<span class="ui-li-count">5</span> @operavo.. - OO x 
</a> 
</1i> GD 
图 标 与 计数 响 
<a href="#"> 
<img src="images/3.gif" class="ui-li-icon"> 水 时 列表 
购买 橘子 的 重量 /kg 重 朋 买 理 果 的 重量 /kg :© 
<span class="ui-li-count">4</span> 二 
</a> 购买 香 菩 的 重量 /kg :© 
</1i> 所 购买 可 子 的 重量 /kg ‘© 
</ul> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1l> 
</div> 
</div> 尾 朗 
</body> ;P| 局 硬 - 
相关 的 代码 实例 可 参考 Chap14.7.html 文件 ， 在 Opera Mobile 模拟 器 中 opi 4eoao ppt 21¢ [| [50% > 
显示 效果 如 图 14-7 所 示 。 图 14-7 图 标 与 计数 器 


14.2.6 ”列表 项 内 容 格式 化 处 理 


在 jQuery Mobile 中 ， 通 常情 况 下 ， 使 用 <p> 标 签 减弱 列表 项 中 显示 的 内 容 ， 使 用 <h1> 一 <h6> 标 签 凸显 
列表 项 中 的 内 容 ， 所 以 两 者 经 常 结合 使 用 ， 这 样 可 以 使 列表 项 中 显示 的 内 容 具 有 层次 感 。 如 果 要 增加 补充 
的 信息 ， 如 日 期 ， 可 以 在 显示 的 <p> 标 签 中 添加 类 别 属性 ui-li-aside。 

【 例 14-8】 实例 文件 ，ch14\Chap14.8.html》 列 表 项 内 容 格式 化 实例 。 代 码 妇 

<body> 


<div data-role="page"> 
<div data-role="header" data-position="fixed"> 



























































和 
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<h1> 列 表 项 内 容 格式 化 处 理 </h1> 
</div> 
<div data-role="main"> 
<ul data-role="listview" data-divider-theme="b"> 
<li data-role="list-divider" > 
<span>2018 年 各 种 水 果 销 量 </span> 
二 /了 > 
<11> 
<a href="#"> 
<img src="images/1.gif" alt=""> 
<h3> 苹 果 </h3> 
<P> 总 销售 量 5 吨 </P> 
<p class="ui-li-aside"><b>2018.5</b> 更 新 </p> 
</a> 
</1li> 
CL 
<a href="#"> 
<img src="images/2.gif" alt=""> 
<h3> 香 燕 </h3> 
<p> 总 销售 量 4.2 吨 </p> 
<p class="ui-li-aside"><b>2018.5</b> 更 新 </p> 
</a> 
了 人 二 
<1i> 
<a href="#"> 
<img src="images/3.gif" alt=""> 
<h3> 橘 子 </h3> 
<P> 总 销售 量 6 吨 </P> 
<p class="ui-li-aside"><b>2018.5</b> 更 新 </p> 
</a> 
</1i> 
‘<li 
<a bref="#"> 
































<img src="images/4.gif" alt=""> @operaMo 一 ODO x 
<h3> 梨 子 </h3> eocainosvCUsen 高 
<p> 总 销售 量 3 吨 </p> 列表 项 内 容 格 . 
<p class="ui-li-aside"><b>2018.5</b> 更 新 </p> 2618 年 各 3 
</a> [7 et 2 sm 
ed LE 
</ul> 
7 = i “um 
<div data-role="footer" data-position="fixed"> oar 
<h1> 尾 部 </h1> os 
</div> [1 nme 
</div> 2018. 5 
</body> 所) a 
相关 的 代码 实例 可 参考 Chap14.8.html 文件 ， 在 Opera Mobile 模拟 二 
器 中 显示 效果 如 图 14-8 所 示 。 如 ET - 
ls Ops 4e0xeo prt: 21¢ [G3| |50% 


图 14-8 ”列表 项 内 容 格式 化 


| 14.2.7 ”过 滤 列 表 项 
加 于 代 


在 jQuery Mobile 中 ， 可 以 通过 在 <ul> 标 签 中 添加 data-filter 属性 设置 来 过 滤 列 表 项 中 的 标题 内 容 。 
实现 过 滤 列表 有 以 下 步骤 : 

(1) 给 过 滤 的 元 素 添加 data-filter="true" 属 性 。 

(2) 创建 <input> 元 素 并 指定 id， 元 素 中 加 上 data-type="search" 属 性 ， 这 样 就 能 创建 基本 的 搜索 字段 。 
(3) 为 过 滤 的 元 素 添加 data-input 属性 ， 属 性 值 必须 是 <input> 元 素 的 id。 
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【 例 14-9】 实例 文件 ，ch14\Chap14.9.html》 过 滤 列 表 项 实例 。 
<body> 
<div data-role="page" id="pageone"> 
<div data-role="main" class="ui-content"> 
<h2> 成 绩 单 </h2> 
<input id="filter" data-type="search"> 
<ul data-role="listview" data-filter="true" data-input="#filter"> 
<1i><a href="#"> 小 明 语文 80 分 ,数学 90 分 </a></1i> 
<1i><a href="#"> 小 红 语 文 95 分 ,数学 75 分 </a></1i> 
<1i><a href="#"> 小 华语 文 85 分 ,数学 90 分 </a></1i> 
</ul> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap14.9.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 效果 如 图 14-9 所 示 。 在 输 
入 框 中 输入 “小 明 ” 则 会 过 滤 掉 其 他 人 的 成 绩 ， 页 面 显示 效果 如 图 14-10 所 示 。 


@ operaMo- 











小 明 语 六 8 分 ,数学 90 分 






小 园 语 六 80 分 ,数学 90 分 


小 红 语文 95 分 ,数学 75 分 © 
小 华语 文 5 分 ,数学 90 分 


5 Opti soxaol PPI: 21¢ 四 | [50% "| 


图 14-9 ”过 滤 列 表 项 页 面 图 14-10 输入 框 输入 “小 明 ” 后 的 效果 











14.3 jQuery Mobile 表单 组 件 


jQuery Mobile 中 的 表单 组 件 是 在 标准 HTML 的 基础 上 增强 了 表单 的 样式 ， 因 此 即使 浏览 器 不 支持 
jQuery Mobile， 表 单 仍 可 正常 使 用 。jQuery Mobile 会 把 表单 元 素 增强 为 触摸 设备 很 容易 使 用 的 形式 ， 因 此 
对 于 iPhone/iPad 与 Android 使 用 Web 表单 将 会 变 得 非常 方便 。 






































14.3.1 滑 块 


在 jQuery Mobile 中 ， 如 果 在 <input> 标 签 中 设置 type 属性 值 为 range， 则 可 以 在 页 面 中 创建 一 个 滑 块 组 
件 。 滑 块 由 两 部 分 组 成 ， 一 部 分 是 数字 输入 框 ， 另 一 部 分 是 可 以 拖 动 修改 输入 框 中 数字 的 滑动 条 。 滑 块 组 
件 可 以 添加 max 和 min 属性 来 设置 滑动 条 的 取 值 范围 ， 来 分 别 表示 最 大 值 和 最 小 值 。 

【 例 14-10】 〈 实 例文 件 : chl4\Chap14.10.html) 滑 块 实例 。 代 码 如 下 : 


<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
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<h1> 滑 块 </h1> 
</div> 
<div data-role="main" id="content"> 
<input type="range" value="16" min="16" max="50" onchange="setSize()" id="text"> 
<p> 拖 动 滑 块 改变 字体 大 小 </p> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 
<script> 
function $$ (id){ 
return document .getElementById (id); 
} 
function setSize(){ 
Var set=$ ('#text') .val ()+"px"; 
$$("content") .style.fontSize=set; 
是 
</script> 


相关 的 代码 实例 可 参考 Chap14.10.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 效果 如 图 14-11 所 示 。 当 
把 滑 块 滑 到 最 右边 时 ， 页 面 显 示 效果 如 图 14-12 所 示 。 





拖 动 滑 块 改变 
字体 大 小 





is Ops 480xe0 Ppl: 21¢ [Gs| [50% 


LS Opy 480x80 Pot: 21¢ 加 [50% | 


14-11 滑 块 14-12 ” 拖 动 滑 块 到 最 大 时 效果 











14.3.2 文本 输入 组 件 


在 jQuery Mobile 中 ,文本 输入 域 是 使 用 标准 HTML 标记 的 ， 并 且 支 持 一 些 HTML 5 的 input 类 型 ， 如 
password、email、tel、number、range 等 。 
【 例 14-11】〔 实 例文 件 ，ch14\Chap14.11.html) 文本 输入 组 件 实例 。 代 码 如 下 : 


<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 文 本 输入 </h1> 
</div> 
<div data-role="main"> 
搜索 :<input type="search" id="search" name="search"> 
姓名 :<input type="text" id="text”" name="text"> 
年 龄 :<input type="number”" id="number" name="number"> 
电话 :<input type="tel" id="tel" name="tel"> 











316 


第 鲍 章 jQuery Mobile 页 面 组 件 


邮箱 :<input type="email" id="email" name="email"> 








@oreavo. - OO x 
</div> cn 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> ja 
</div> a 
</div> 壮 名 
</body> 
相关 的 代码 实例 可 参考 Chap14.11 html 文件 ， 在 Opera Mobile 模拟 = 








器 中 显示 效果 如 图 14-13 所 示 。 


14.3.3 ”翻转 切换 开关 六 





























在 jQuery Mobile 中 ， 通 过 在 <select> 标 签 中 设置 data-role= "slider" 
属性 类 别 , 可 以 将 该 下 拉 菜 单元 素 中 的 两 个 <option> 选 项 转变 为 一 个 翻转 EE 
切换 的 开关 。 图 14-13 文本 输入 组 件 实例 

【 例 14-12】〔 实 例文 件 ，ch14\Chap14.12.html〉 翻 转 切 换 开关 实例 。 代 码 如 下 : 

<body> 


<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 切 换 开关 </h1> 
</div> 
<div data-role="main"> 
<select name="slider" id="slider" data-role="slider"> 
<option value="0"> 关 </option> 
<option value="1"> 开 </option> 
</select> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap14.12.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 效果 如 图 14-14 所 示 。 当 
单 击 开关 按钮 时 ， 页 面 显示 效果 如 图 14-15 所 示 。 











rE Gun 








LG Op se0xe0 ppt: 21¢ [GR] SOR = lls Ops 48080 PP 21¢ [Bs] [0% 


14-14 ”关闭 状态 14-15 ”打开 状态 
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二 14.3.4 ” 单 选 按钮 


在 通常 情况 下 ， 使 用 <fieldset> 标 签 ， 并 在 该 标签 中 设置 data-role="controlgroup" 属 性 类 别 ， 把 所 有 的 
<input> 和 <label> 包 含 其 中 ， 这 样 可 以 样式 化 容器 中 的 所 有 标签 ， 单 选 钮 样式 化 后 更 加 容易 被 点 击 和 触摸。 
【 例 14-13】《〔 实 例文 件 ，ch14\Chap14.13.html〉 单 选 按 钮 实例 。 代 码 如 下 : 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 单 选 按钮 </h1> 
</div> 
<div data-role="main"> 
<p> 请 选 出 你 最 喜欢 的 水 果 </p> 
<fieldset data-role="controlgroup"> 
<label for="radiol"> 草 果 </label> 
<input type="radio" id="radiol" value="1" name="radio"> 
<label for="radio2"> 桥 子 </label> 
<input type="radio" id="radio2" value="2" name="radio"> 
<label for="radio3"> 香 燕 </label> 
<input type="radio" id="radio3" value="3" name="radio"> 
<label for="radio4"> 梨 子 </label> 
<input type="radio" id="radio4" value="4" name="radio"> 
































</fieldset> 
<div calss="ui-grid-a"> 
<div clas -block-a"> 
<a href="#"” data-role="button” class="ui-btn-active"> 确 定 </a> 
</div> 


<div class="ui-block-b"> 
<input type="button”value=" 取 消 ”> 
</div> 
</div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap14.13.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 效果 如 图 14-16 所 示 。 当 
选择 “苹果 ”或 “香蕉 ” 单 选 按钮 时 ， 页 面 效果 如 图 14-17 所 示 。 


@operaro.. - 口 x 


fie/ocathowcyuser 克 荐 co 

























@operavo.. —- OO x 


file/localhosUC/User: 夫 


@operaMo. —- 0 x 


file/ocalhosUC/User: 页 














单 选 按钮 单 选 按钮 单 选 按钮 
| 请 选 出 你 最 喜欢 的 水 果 | 请 选 出 你 县 喜欢 的 水 果 | 请 造 出 你 县 喜欢 的 水 果 
苹果 OO 苹果 革 果 
权 子 神子 袜子 
香 桔 香蕉 OO 香蕉 
架子 梨子 


LG Opti 480x80 Ppt: 21¢ [B [50% | 


图 14-16 单 选 按钮 14-17 选择 “苹果 ”或 “香蕉 ” 单 选 按钮 效果 


LG Opt 480x30! ppt: 21¢ [Gy] [50% 

























LG op 480x30! ppt: 21¢ [By] [50% ~ 
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14.3.5 复 选 框 


与 单 选 按钮 类 似 ， 使 用 <fieldset> 标 签 ， 并 在 该 标签 中 设置 data-role="controlgroup" 属 性 类 别 ， 包 含 多 个 人 
多 选 框 。 复 选 框 选项 组 默认 是 垂直 显示 ， 也 可 以 在 <fieldset> 标 签 中 设置 data-type="horizontal" 属 性 类 别 ， 将 
其 改变 为 水 平 显示 。 

【 例 14-14】 实例 文件 ，ch14\Chap14.14.html〉 复 选 框 实例 。 代 码 如 下 : 


<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 复 选 框 </h1> 
</div> 
<div data-role="main"> 
<p> 请 选 出 你 喜欢 的 几 种 水 果 </p> 
<fieldset data-role="controlgroup"> 
<label for="chbl"> 芋 果 </label> 
<input type="checkbox"” id="chbl" value="1" name="radio"> 
<label for="chb2"> 橘 子 </1abe1> 
<input type="checkbox" id="chb2" value="2" name="radio"> 
<label for="chb3"> 香 菩 </1label> 
<input type="checkbox" id="chb3" value="3" name="radio"> 
<label for="chb4"> 梨 子 </label> 
<input type="checkbox" id="chb4" value="4" name="radio"> 















































</fieldset> 
<div class="ui-grid-a"> 
<div clas i-block-a"> 





<a href="#"” data-role="button” class="ui-btn-active"> 确 定 </a> 
</div> 
<div class="ui-block-b"> 
<input type="button”value=" 取 消 "> 
</div> 
</div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<hl1> 尾 部 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap14.14.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 效果 如 图 14-18 所 示 。 在 
中 可 以 随便 选择 自己 喜欢 的 水 果 ， 页 面 显 示 效 果 如 图 14-19 所 示 。 


CopaNe — 0O x 


tevocanosucsusen 冯 芽 555 】 erocatnosucsusen 











叶 
如 























| 造作 要 允 的 几 种 水 时 情 计 出 人 要 允 的 几 囊 水 里 
午时 
模子 
口 二 本 
黑子 


旦 


La ops 490x30 Ppl: 21¢ Bh) |50% ~ is op 4aoaa Ppt: 21t Bh] [50% ~ 


图 14-18 复 选 框 14-19 ” 勾 选 复 选 框 选择 水 果 效果 
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蝇 14.3.6 ”选择 菜单 


<select> 标 签 形成 的 选择 菜单 在 jQuery Mobile 中 样式 发 生 了 很 大 变化 ， 所 以 在 移动 设备 开发 中 需要 创 
建 自 定义 的 选择 菜单 。 在 jQuery Mobile 中 创建 自 定义 选择 菜单 其 实 很 简单 ， 只 需要 在 <select> 标 签 中 设置 
data-native-menu="false" 属 性 类 别 ， 即 可 将 该 选择 菜单 转换 为 自 定义 菜单 类 型 。 

自 定义 的 选择 菜单 由 按钮 和 菜单 两 部 分 组 成 ， 当 用 户 单 击 按钮 时 ， 对 应 的 菜单 选择 器 将 会 自动 打开 ， 
选 其 中 某 一 项 后 ， 菜 单 自动 关闭 。 

【 例 14-15】“〈 实 例文 件 ，chl4\Chap14.15.html) 选择 菜单 实例 。 代 码 如 下 : 


<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 选 择 菜单 </h1> 
</div> 
<div data-role="main"> 
<p> 请 选择 登录 账号 时 间 :</p> 
<fieldset data-role="controlgroup"> 
<select name="year" id="year" data-native-menu="false"> 
<option> 选 择 年 份 </option> 
<option value="2016">2016</option> 
<option value="2017">2017</option> 
<option value="2018">2018</option> 
</select> 
<select name="month" id="month" data-native-menu="false"> 
<option> 选 择 月 份 </option> 
<option value="1">1 月 </option> 
<option value="2">2 月 </option> 
<option value="3">3 月 </option> 
<option value="4">4 月 </option> 
<option value="5">5 月 </option> 
<option value="6">6 月 </option> 
<option value="7">7 月 </option> 












































点 












































<option value="8">8 月 </option> 
<option value="9">9 月 </option> 
<option value="10">10 月 </option> 
<option value="11">11 月 </option> 
<option value="12">12 月 </option> 
</select> 
</fieldset> 
</div> 
<div data-role="footer" data-position="fixed"> 
<hl1> 尾 部 </h1l> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap14.15.html 文件 ,在 Opera Mobile 模拟 器 中 显示 效果 如 图 14-20 所 示 。 
在 页 面 中 选择 年 份 和 月 份 ， 页 面 效 果 如 图 14-21 所 示 。 选 择 日 期 后 ， 页 面 效果 如 图 14-22 所 示 。 
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起 opermMc- — 口 X @ opere Me 一 口 x 

Ce 
运 环 票 单 选择 菜单 
I 5 
选择 月 份 © 5 月 © 


LG Opti 4eoao Ppk 21¢ [Gs] 50% =| 


5 Opti sa0w0 Ppt: zt 国 50% 


图 14-20 选择 菜单 图 14-21 选择 年 份 和 月 份 图 14-22 选择 日 期 后 页 面 效 果 


14.3.7 ”多 项 选择 菜单 


在 jQuery Mobile 中 的 选择 菜单 可 以 通过 设置 multiple 属性 ， 实 现 菜单 的 多 项 选择 。 如 果 给 某 个 选择 菜 
单 设置 multiple="true" 属 性 类 别 ， 单 击 该 按钮 ， 在 弹出 的 菜单 对 话 框 中 ， 全 部 菜单 选项 右 侧 会 出 现 一 个 可 以 
勾 选 的 复 选 框 ， 用 户 可 以 通过 勾 选 该 复 选 框 ， 选 中 任意 多 个 选项 。 选 择 完 后 ， 单 击 左 上 角 的 “关闭 ”按钮 ， 
对 话 框 将 关闭 ， 对 应 按钮 自动 更 新 为 用 户 所 选择 的 内 容 选 型 。 
【 例 14-16】 〈 实 例文 件 ， chl4\Chap14.16.html) 多 项 选择 菜单 。 代 码 如 下 ; 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<hl> 多 项 选择 菜单 </h1> 
</div> 
<div data-role="main"> 
<p> 请 选择 登录 账号 的 时 间 :</p> 


<fieldset data-role="controlgroup"> 

<select name="year" id="year" data-native-menu="false" multiple="true"> 
<option> 选 择 年 份 </option> 
<option value="2016">2016</option> 
<option value="2017">2017</option> 
<option value="2018">2018</option> 

</select> 

<select name="month" id="month" data-native-menu="false" multiple="true"> 


<option> 选 择 月 份 </option> 

<option value="1">1 月 </option> 
<option value="2">2 月 </option> 
<option value="3">3 月 </option> 
<option value="4">4 月 </option> 
<option value="5">5 月 </option> 
<option value="6">6 月 </option> 
<option value="7">7 月 </option> 
<option value="8">8 月 </option> 
<option value="9">9 月 </option> 
<option value="10">10 月 </option> 
<option value="11">11 月 </option> 
<option value="12">12 月 </option> 

</select> 


</fieldset> 
</div> 
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<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap14.16.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 效果 如 图 14-23 所 示 。 在 
页 面 中 单 击 选择 年 份 和 月 份 ， 页 面 效果 如 图 14-24 所 示 。 选 择 完 日 其 后， 页面 效果 如 图 14-25 所 示 。 






















































































人 多 项 选 江村 单 
多 et 
尾部 尾部 
ED 
on mom om 
图 14-23 多 项 选择 菜单 图 14-24 选择 年 份 和 月 份 图 14-25 选择 日 期 后 页 面 效果 


14.4 “就业 面试 技巧 与 解析 
14.4.1 ”面试 技巧 与 解析 (一 ) 


面试 官 : jQuery Mobile 提供 了 许多 可 视 化 的 组 件 ， 请 谈 一 谈 对 jQuery Mobile 组 件 的 理解 。 

应 聘 者 : 在 jQuery Mobile 中 提供 了 许多 常用 的 组 件 ， 包 括 按钮 组 件 、 列 表 组 件 和 各 种 类 型 的 表单 组 件 
等 。 灵 活 地 运用 这 些 组件 ， 可 以 使 我 们 在 jQuery Mobile 移动 应 用 开发 设计 中 得 心 应 手 ， 开 发 出 更 加 丰富 的 
页 面 效果 。 


14.4.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : 在 jQuery Mobile 列表 组 件 中 ， 如 果 想 要 使 用 搜索 方式 过 滤 列 表 项 中 的 标题 内 容 ， 请 问 如 何 实 
现 过 滤 ? 

应 聘 者 : 在 jQuery Mobile 中 ， 可 以 通过 在 <ul> 中 添加 data-filter 属性 设置 过 滤 列 表 项 中 的 标题 内 容 。 
具体 实现 可 以 分 为 3 个 步骤 : 

(1) 给 过 滤 的 元 素 添 加 data-filter="true" 属 性 。 

(2) 创建 <input> 元 素 并 指定 id， 元素 上 加 上 data-type="search" 属 性 ， 这 样 就 能 创建 基本 的 搜索 字段 。 

(3) 为 过 滤 的 元 素 添加 data-input 属性 ， 属 性 值 是 <input> 元 素 的 id。 
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第 15 章 
使 用 jQuery Mobile 主题 


二 学 习 指引 


主题 对 于 Web 站 点 和 应 用 程序 起 着 非常 重要 的 作用 ， 是 最 直接 面 对 用 户 的 操作 界面 ， 关 系 到 用 户 的 最 
终 体验 。jQuery Mobile 中 提供 了 多 种 不 同 风格 的 主题 预 设 ， 使 设计 者 可 以 轻松 地 创建 出 不 同 主题 的 jQuery 
Mobile 页 面 。 本 章 主 要 讲解 有 关 jQuery Mobile 主题 的 知识 。 


”重点 导读 


。 掌 握 建立 jQuery Mobile 默认 主题 及 其 修改 方法 。 
。 掌 握 自 定 义 jQuery Mobile 页 面 和 工具 栏 主题 。 
。 熟 悉 使 用 ThemeRoller 创建 主题 的 方法 。 


15.1 jQuery Mobile 页 面 主题 


jQuery Mobile 页 面 主题 用 于 控制 元 素 的 颜色 、 渐 变 、 字 体 、 阴 影 、 圆 角 等 视觉 效果 ， 并 包含 了 多 套色 
板 ， 每 套色 板 中 都 定义 了 列表 项 、 表 单 、 按 钮 、 工 具 栏 、 内 容 块 、 页 面 的 全 部 视觉 效果 。 


15.1.1 默认 主题 


在 jQuery Mobile 1.4.5 版 本 中 提供 了 2 套 默 认 主题 样式 ， 分 别 是 样式 a 和 b。 在 早 前 ，jQuery Mobile 1.1.1 
版 本 提供 了 5 套 默认 主题 样式 ， 分 别 是 样式 a、b、c、d 和 e@。 

在 默认 情况 下 ，jQuery Mobile 页 面 默 认 使 用 的 是 主题 样式 a， 如 果 需 要 更 改 某 组 件 和 容器 的 主题 样式 ， 
只 需要 将 它 的 data-theme 属性 值 设置 为 主题 对 应 的 样式 字母 即 可 。 

【 例 15-1】 〈 实 例文 件 : chlS\Chap15.1.html) 默认 主题 实例 。 代 码 如 下 : 

<body> 

<div data-role="page" id="pagel" data-theme="a"> 

<div data-role="header"> 
<h1> 默 认 主题 </h1> 
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NS 





</div> 
<div data-role="main" class: 
<a href="#pagel" data-rol 





"ui-content"> 
button”data-inline="true”class="ui-btn-active"> 主 题 a 效果 </a> 
<a href-"#page2"”data-role="button”data-inline="true”class="ui-btn-active"> 主 题 b 效果 </a> 
<a href="#"” class="ui-btn"> 按 钮 </a> 
<label for="name"> 输 入 框 :</label> 
<input type="text" name="name” id="name” placeholder=" 内 容 "> 
<label for="SW"> 切 换 开 关 :</label> 
<select name="SW" id="SW" data-role="slider"> 
<option value=" 关 "> 关 </option> 
<option value=" 开 ”selected> 开 </option> 
</select> 
</div> 
<div data-role="footer"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
<div data-rol 
<div data-role="heade 
<h1> 默 认 主题 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<a href="#pagel" data-role="button"” data-inline="true"” class="ui-btn-active"> 主 题 a 效 果 </a> 
<a href="#page2" data-role="button"” data-inline="true” class="ui-btn-active"> 主 题 b 效 果 </a> 
<a href="#"” class="ui-btn"> 按 钮 </a> 
<label for="namel"> 输 入 框 :</label> 
<input type="text"” name="name” id="namel"” placeholder=" 内 容 "> 
<label for="SW1"> 切 换 开 关 :</label> 
<select name="SW" id="SW1" data-role="slider"> 











page2" data-them: 








<option value=" 关 "> 关 </option> 
<option value=" 开 " selected> 开 </option> 
</select> 
</div> 
<div data-role="footer"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 








相关 的 代码 实例 可 参考 Chap15.1.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 15-1 所 示 。 当 
“主题 b 效果 ”按钮 时 ， 将 跳 转 到 page2 容器 ，page2 容器 主题 是 b， 页 面 显 示 效 果 如 图 15-2 所 示 。 


四 operaMo- — 上 x 












rr err 


以 认 主 是 由 主题 


抱 国 从 
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15-1 a 主题 效果 15-2 b 主题 效果 
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15.1.2 ”修改 默认 主题 


除了 可 以 使 用 系统 提供 的 主题 样式 外 ， 开 发 者 还 可 以 根据 应 用 的 需求 修改 相应 的 主题 样式 。 实 现 方法 “ 
很 简单 ， 只 要 打开 定义 主题 的 CSS 样式 文件 ， 找 到 需要 修改 的 元 素 ， 修 改 对 应 的 属性 值 即 可 。 
【 例 15-2】 《实例 文件 ，chl5\Chap15.2.html) 修改 默认 主题 实例 。 代 码 如 下 : 
<body> 
<div data-role="page"” id="pageljQ”" data-theme="a" data-position="fixed"> 
<div data-role="header"> 
<h1> 自 定义 主题 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<a href="#"” class="ui-btn"> 按 钮 </a> 
<label for="name"> 输 入 框 :</label> 
<input type="text" name="name” id="name” placeholder=" 内 容 "> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 
























































相关 的 代码 实例 可 参考 Chap15.2.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 15-3 所 示 。 可 以 
在 jQuery Mobile 源 CSS 文件 中 找到 设置 a 主题 的 CSS 类， 如 图 15-4 所 示 。 








theme-a .ui-bar-inherit, 

htnl .ui-bar-a .ui-bar-inherit, 

html .ui-body-a .ui-bar-inherit, 

htnl body .ui-group-theme-a .ui-bar-inherit 下 
background-color: #egege9 


border-color:#ddd 
color: #333 
2 text-shadow: 0 
和 局 而 - font-weight: bold; 








i op 4aoao pph 1 So% | 








15-3 ”a 主题 页 面 效果 15-4 a 主题 CSS 样式 


在 a 主题 的 CSS 样式 上 修改 , 部 分 样式 如 图 15-5 所 示 。 修改 完成 后 保存 页 面 ， 在 Opera Mobile 模拟 器 
中 刷新 页 面 ， 页 面 效果 显示 为 修改 后 的 样式 ， 如 图 15-6 所 示 。 






































vi-bar-e, | i 
ui-page-theme-a .ui-bar-inherit, py 
html . ui-bar-a .ui-bar-inherit, 


html . ui-body-a .ui-bar-inherit, 

html body .ui-group-theme-: 
background-color: red 
border-color:#ddd 
color: white 





ui 























ad lpx rs mp 
font-weight: bold 和 > 
) is Ops sameo pztt | 30% | 
图 15-5 修改 后 的 a 主题 CSS 样式 15-6 ”修改 a 主题 后 的 效果 
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15.2” 自 定义 jQuery Mobile 页 面 和 工具 栏 主题 


前 面 介绍 的 是 在 jQuery Mobile 自 带 的 CSS 样式 中 修改 主题 样式 , 而 每 次 版 本 更 新 后 , 都 需要 对 新 版 本 
的 文件 重新 覆盖 修改 后 的 代码 ， 操 作 很 麻烦 。 因 此 ， 可 以 重新 编写 一 个 单独 的 CSS 文件 ， 专 门 定义 页 面 与 
组 件 的 主题 样式 。 用 时 只 需 把 该 CSS 文件 引入 。 


15.2.1 ” 自 定义 页 面 主题 


jQuery Mobile 页 面 结构 由 一 个 添加 了 data-role="page" 属 性 类 别 的 <div> 组 成 。 如 果 要 自 定义 该 元 素 的 主 
题 ， 需 要 在 该 元 素 上 添加 data-theme 属性 ， 并 为 其 指定 一 个 唯一 的 且 是 未 用 过 的 主题 值 ， 这 样 就 可 以 为 该 
页 面 写 一 个 自 定义 的 CSS。 
jQuery Mobile 中 可 以 自 定义 主题 类 ， 如 表 15-1 所 示 ， 列 出 了 jQuery Mobile 页 面 中 可 以 用 的 主题 类 ， 
字母 a 一 z 表示 CSS 样式 可 以 指定 a 一 z。 


























































































































表 15-1 jQuery Mobile 中 的 主题 类 


类 样式 名 称 说 “ 明 
ui-page-theme-(a~7z) 设置 页 面 整体 
Ui-bar-(a~7z) 设置 页 面 头 部 栏 、 尾 部 栏 以 及 其 他 栏目 
ui-btn-(a~7z) 设置 按钮 
ui-group-theme-(a~7z) 设置 控制 组 的 演示 listviews 和 collapsible 集合 
ui-overlay-(a~z) 设置 页 面 背景 颜色 


【 例 15-3】 实例 文件 ，ch15\Chap15.3.html》a 主题 页 面 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 自 定义 主题 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel" data-theme="a"> 
<div data-role="header" data-position="fixed"> 
<h1> 自 定义 主题 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<a href="#"” class="ui-btn"> 按 钮 </a> 
<label for="name"> 输 入 框 :</label> 
<input type="text"” name="name” id="name” placeholder=" 内 容 "> 
</div> 
<div data-role="footer" data-position="fixed"> 
<hl1> 尾 部 </hl> 
</div> 
</div> 
</body> 
</html> 
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相关 的 代码 实例 可 参考 Chap15.3.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 15-7 所 示 。 

上 面 是 jQuery Mobile 中 的 a 主题 的 默认 样式 ， 下 面 我 们 在 外 部 新 建 一 个 CSS 样式 文件 style.css， 并 在 
<head> 标 签 中 引入 该 CSS 文件 ， 其 代码 如 下 : 

<link rel="stylesheet" href="style.css"> 


在 style.css 样式 表 文 件 中 创建 名 为 .ui-page-theme-z 的 CSS 样式 ， 如 图 15-8 所 示 。 返 回 jQuery Mobile 
























































页 面 中 ， 在 page 容器 标签 中 添加 data-theme 属性 设置 ， 引 用 刚 创 建 的 z 主题 ， 具 体 可 参考 【 例 15-4】。 


@opeaMo. —- OO x 


rieyochhoscyuser 太 =-s。 




















总 sylecss 


ui-page-theme-z 




















面 background-color: yellow; 
LG Opti 48ox8o ppt 21¢ [Ea] |50% 
图 15-7 ”页面 a 主题 效果 图 15-8 ”创建 的 z 主题 
【 例 15-4】“〈 实 例文 件 ，ch15\Chap15.4.html) 自 定义 页 面 主题 实例 。 代 码 如 下 : 
<head> 
<meta charset="UTF-8"> 
<title> 自 定义 主题 </title> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<!-- 引 入 外 部 自 定义 css 文件 --> 
<link rel="stylesheet" href="style.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<!-- 添 加 自 定义 的 主题 --> 
<div data-role="page" id="pagel" data-theme="z"> 
<div data-role="header" data-position="fixed"> 
<h1> 自 定义 主题 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<a href="#"” class="ui-btn"> 按 钮 </a> 
<label for="name"> 输 入 框 :</label> 
<input type="text" name="name” id="name” placeholder=" 内 容 "> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 
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相关 的 代码 实例 可 参考 Chap15.4.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 15-9 所 示 。 


@operaMo. - OO x 
Ce 


自 定义 主题 











DD- 
15-9 引入 z 主题 样式 后 的 效果 





浴 15.2.2” 自 定义 工具 栏 主题 


在 jQuery Mobile 页 面 中 ， 头 部 和 尾部 两 个 工具 栏 默 认 的 主题 是 a， 也 可 以 直接 在 工具 栏 容器 标签 中 添 
加 data-theme 属性 指定 其 所 需要 使 用 的 主题 。 定 义工 具 栏 ， 则 可 以 创建 -ui-bar-(a-z) 类 CSS 样式 ， 然 后 通过 
data-theme 属性 调整 所 定义 的 主题 样式 即 可 。 

【 例 15-5】〔 实 例文 件 ，ch15\Chap15.5.html》a 主题 工具 栏 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title> 自 定义 工具 栏 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header" data-position="fixed"> 
<h1> 自 定义 工具 栏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<a href="#"” class="ui-btn"> 按 钮 </a> 
<label for="name"> 输 入 框 :</label> 
<input type="text"” name="name” id="name"” placeholder=" 内 容 "> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </hl> 
</div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap15.5.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 15-10 所 示 。 
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上 面 是 jQuery Mobile 中 的 a 主题 样式 ， 下 面 我 们 在 外 部 新 建 一 个 CSS 文件 stylel.css， 并 在 <head> 标 

















h 引 入 该 CSS 文件 ， 代 码 如 下 : 


<link rel="stylesheet"” href="stylel.css"> 


在 stylel.css 样式 表 文件 中 创建 名 为 .ui-bar-y 和 .ui-bar-z 的 CSS 样式 ,如 图 15-11 所 示 。 返 回 jQuery Mobile 


























中 ， 在 头 部 和 尾部 栏 中 添加 data-theme 属性 设置 ， 引 用 刚 创 建 的 主题 y 和 z， 具 体 可 参考 【 例 15-6】。 











@ opera Mo.. 


fieyiocalnosvcyUser 去 芽 G505。 


自 定义 工具 栏 


按钮 


Ep 


.ui-bar-y[ 
mn backeround: #22aadd 
color: #1f, 
font-sige: 25px; 
] 








ui-bar- 式 
本 background: redi 
~ 一 一 一 人 
图 15-10 页 面 a 主题 效果 图 15-11 创建 y 和 z 主题 
【 例 15-6】 实例 文件 ，ch15\Chap15.6.html》 自 定义 工具 栏 主题 实例 。 代 码 如 下 : 


<head> 
<meta charset="UTF-8"> 
<title> 自 定义 工具 栏 </title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<!-- 引 入 外 部 自 定义 css 文件 --> 
<link rel="stylesheet" href="stylel.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<!-- 添 加 自 定义 的 主题 y--> 
<div data-role="header" data-theme="y" data-position="fixed"> 
<h1> 自 定义 工具 栏 </h1> 
</div> 
<div data-role="main" class="ui-content"> 
<a href="#"” class="ui-btn"> 按 钮 </a> 
<xlabel for="name"> 输 入 框 :</label> 
<input type="text"” name="name” id="name” placeholder=" 内 容 "> 
</div> 
<!-- 添 加 自 定义 的 主题 z--> 
<div data-role="footer" data-position="fixed" data-theme="z" > 
<hl1> 屁 部 </h1l> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap15.6.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 15-12 所 示 。 
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@opeaMo. — 口 x 


feocatnosvcJuser 区 有 芽 5005 


自 定义 工 .… 





和 和 局 轩 
LG opt 480x80! pp 21¢ [G3] 150% ~ 


图 15-12 引入 y 和 zz 主题 后 的 页 面 效果 


15.2.3” 自 定义 内 容 主题 


内 容 主 题 相 比 较 于 页 面 主题 所 影响 的 范围 小 得 多 。 内 容 主题 所 影响 的 范围 只 在 main 容器 中 ,容器 之 外 
的 元 素 不 受 影响 。 在 容器 main 中 ， 可 以 通过 data-content-theme 属性 设置 可 折 苔 区 块 中 显示 区 域 的 主题 ， 
该 主题 是 独立 的 、 自 定义 的 ， 不 受 限 于 内 容 区 域 main 容器 的 主题 。 
【 例 15-7】〔 实 例文 件 ，ch15\Chap15.7.html〉 自 定义 内 容 主题 实例 。 代 码 如 下 : 


<body> 
<div data-role="page" id="pagel"> 
<div data-role="header" data-position="fixed"> 
<h1> 自 定义 内 容 主 题 </h1> 
</div> 
<div data-role="main"> 
<div data-role="collapsible-set"> 
<div data-role="collapsible" data-collapsed="false" data-theme="a" data-content-theme="b"> 
<h3> 苹 果品 种 </h3> 
<P > 辽 南 寒 富 </P> 
<P > 山东 红星 </p> 
<p > 山西 万 荣 </p> 
</div> 
<div data-role="collapsible" data-theme="b" data-content-theme="a"> 
<h3> 香 蕉 品种 </h3> 
<p > 仙人 莱 </P> 
<p > 西贡 若 </P> 
<P > 天 宝 菩 </P> 
</div> 
</div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<hl1> 尾 部 </h1l> 
</div> 
</div> 
</body> 


相关 的 代码 实例 可 参考 Chap15.7.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 15-13 所 示 。 当 让 
刁 “ 香 葵 品 种 ”按钮 时 ， 显 示 效 果 如 图 15-14 所 示 。 
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自 定义 内 容 主 题 


苹果 品种 





LG Op 480xe0 ppt: 21¢ 轩 [50% = 
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图 15-13 自 定 义 “ 草 果品 种 ”主题 页 面 15-14” 自 定义 “ 香 顾 品种 ”主题 页 面 


15.3 ”使 用 ThemeRoller 创建 主题 


jQuery Mobile 本 身 虽 然 提 供 了 不 同 的 样式 ， 但 这 些 样式 并 不 能 满足 所 有 人 的 要 求 ， 而 自 定义 jQuery 
Mobile 的 样式 所 牵扯 的 CSS 样式 又 非常 复杂 , 为 此 jQuery Mobile 专门 推出 了 ThemeRoller 工具 用 于 生成 这 
些 样式 。 访 问 ThemeRoller 官方 网 站 http://themeroller.jquerymobile.com/， 页 面 如 图 15-15 所 示 。 
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15-15 ThemeRoller 官方 网 站 


进入 ThemeRoller 官方 网 站 页 面 可 以 看 到 ThemeRoller 编辑 器 ， 上 默认 的 有 3 个 主题 面板 ， 分 别 为 A、 
B 和 C， 而 在 页 面 下 方 ， 还 可 以 通过 单 击 Add swath 区 域 添加 空白 的 主题 面板 ， 如 图 15-16 所 示 。 在 页 面 
左 侧 功 能 区 的 标签 对 应 相应 的 主题 , 其 中 Global 标签 用 于 设置 jQuery Mobile 主题 的 全 局 属性 , 如 
所 示 。 

在 Global 选项 卡 中 展开 各 选项 































































































15-17 
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义 看 到 可 供 设 置 的 全 局 属性 ， 如 图 15-18 所 示 。 
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15-16 ThemeRoller 主题 面板 
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图 15-17 Global 标签 图 15-18 ”Global 标签 全 局 属性 
击 A 选项 上 不， 可 以 转 到 与 A 主题 相关 的 属性 设置 中 ， 进 而 对 相关 属性 进行 设置 ， 如 图 15-19 所 示 。 


ho 
低 

















ThemeRoller 


SwatchA Delete Duplicate 


页 面 整体 属性 设置 区 域 





工具 栏 属性 设置 区 域 
内 容 区 域 属性 设置 区 域 
< 一 默认 超 链 接 属 性 设置 区 域 
按钮 正常 状态 设置 区 域 » Buttor: Normal 





» Buttore Hover 按钮 经 过 状态 设置 区 域 
按钮 按 下 状态 设置 区 域 mm 
» Active State 元 素 激 活 状态 设置 区 域 





15-19 设置 A 主题 的 相关 属性 
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通过 ThemeRoller 可 以 对 jQuery Mobile 的 样式 进行 所 见 即 所 得 的 设计 。 例如， 在 A 选项 卡 中 对 相应 的 
属性 进行 设置 ， 单 击 颜色 设置 框 ， 可 以 弹出 颜色 选择 窗口 ， 选 择 需 要 的 颜色 ， 也 可 以 输入 十 六 进 制 颜色 值 ， 
在 页 面 右 侧 的 主题 A 上 马上 就 能 够 看 到 相应 的 主题 效果 ， 如 图 15-20 所 示 。 
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Linked list item Linked list item 





15-20 修改 人 主题 样式 后 的 页 面 效果 
在 ThemeRoller 中 可 以 利用 页 面 中 提供 的 Inspector 工具 查看 标签 的 选项 对 应 的 是 什么 组 件 。 单 击 页 五 
中 的 Inspector 工具 , 在 A 主题 面板 中 单 击 相应 的 元 素 , 页 面 左 侧 功 能 区 自动 转 到 该 元 素 属 性 的 设置 选项 中 
如 图 15-21 所 示 。 
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15-21 Inspector 工 具 


在 该 页 面 中 创建 好 需要 的 主题 之 后 ， 单 击 页 面 上 方 的 Download 按钮 ， 如 图 15-22 所 示 。 弹 出 主题 文件 
下 载 窗口 ， 在 Theme Name 文本 框 中 输入 自 定义 文件 名 称 ， 单 击 右 下 角 的 Download Zip 按钮 ， 即 可 下 载 在 
该 页 面 生成 的 主题 样式 文件 ， 如 图 15-23 所 示 。 
下 载 的 文件 为 zip 压缩 包 文件 ， 解 压缩 文件 之 后 ， 会 有 一 个 index.html 文件 和 一 个 themes 文件 夹 。 打 

开 index.html 文件 之 后 ， 里 面 有 用 户 如 何 引用 文件 说 明 ， 如 图 15-24 所 示 。 
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15-22 单 击 Download 按钮 
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图 15-23 下 载 自 定义 的 主题 样式 文件 
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图 15-24 index.html 文 件 


需要 注意 的 是 ， 一 定 要 将 解压 得 到 的 themes 文件 夹 放 在 jQuery Mobile 页 面 所 在 的 文件 目录 下 ， 这 样 
才能 正确 地 引用 上 面 的 代码 。 
【 例 15-8】《 实 例文 件 ，ch15\Chap15.8.html) 使 用 ThemeRoller 创建 的 主题 实例 。 代 码 如 下 : 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>ThemeRoller 主题 </title> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
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<link rel="stylesheet" href="themes/myTheme.min.css"/> 
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<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css"/> 
<link rel="stylesheet"” href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1. 


4.5.min.css"/> 


<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 


</head> 
<body> 
<div data-role="page"> 
<div data-role="header" data-position="fixed"> 
<h1> 头 部 </h1> 
</div> 
<div data-role="main"> 
<p> 内 容 </p> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap15.8.html 文件 ， 在 Opera Mobile 











| op saoreo Ppt 21¢ 加 50% = 


模拟 器 中 预览 效果 如 图 15-25 所 示 。 15-25 ThemeRoller 创建 的 主题 效果 


15.4 “就业 面试 技巧 与 解析 


15.4.1 ”面试 技巧 与 解析 (一 ) 





面试 官 : jQuery Mobile 主题 框架 系统 可 以 使 应 用 的 视觉 风格 得 到 统一 ， 请 介绍 一 下 它 有 哪些 特点 ? 








应 聘 者 : jQuery Mobile 主题 框架 系统 有 以 下 4 个 特点 。 


(1) 轻 量 级 文件 ， 在 jQuery Mobile 中 ， 全 面 支持 CSS 3 和 HTML 5， 页 面 中 的 圆 角 、 阴 影 、 渐 变色 和 





动画 过 渡 效 果 等 都 是 通过 CSS 3 和 HTML 5 实现 的 ， 没 有 使 用 图 片 ， 从 而 减 小 了 文件 的 大 小 。 














(2) 轻 量 级 图 标 : 在 jQuery Mobile 主题 框架 中 ， 使 用 了 一 套 简化 的 
备 中 使 用 的 图 标 。 








(3) 灵活 的 主题 : jQuery Mobile 主题 框架 系统 提供 了 多 套 可 供 选择 的 








都 可 以 混合 搭配 ， 丰 富 了 jQuery Mobile 页 面 的 视觉 效果 。 

















(4) 实用 的 自 定义 主题 ， 在 jQuery Mobile 中 ， 除 了 使 用 jQuery Mobile 半 











外 ， 还 允许 开发 者 自 定义 主题 ， 来 满足 应 用 程序 的 需要 。 
15.4.2 面试 技巧 与 解析 〈 二 ) 











面试 官 : 在 项 目 开 发 中 ， 我 们 希望 根据 应 用 的 需要 去 修改 默认 主题 或 者 自 定义 3 








两 种 方法 的 理解 。 

















图 标 集 ， 它 包含 绝 大 部 分 在 移动 设 
主题 和 色调 ， 并 且 每 套 主题 之 间 


EF 题 框 架 系统 自 带 的 主题 样式 





E 题 ， 请 谈 一 下 你 对 这 


应 聘 者 : 修改 默认 主题 , 顾名思义 , 就 是 在 jQuery Mobile 源 CSS 文件 上 修改 样式 , 实现 的 方法 很 简单 ， 








但 由 于 修改 的 是 源 CSS 样式 ， 所 以 每 次 版 本 更 新 后 ， 都 需要 对 新 版 本 的 文件 时 


起 来 不 是 很 方便 。 自 定义 主题 ， 就 是 重新 编写 一 个 单独 的 CSS 文件 ， 专 门 用 于 自 定义 主题 的 样式 ， 

















中 只 需 把 该 文件 载 入 项 目 。 








新 覆盖 修改 后 的 代码 ， 操 作 


在 项 目 
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第 16 章 
使 用 jQuery Mobile 事件 


EP 学 习 指引 


在 jQuery Mobile 中 可 以 使 用 任何 标准 的 jQuery 事件 。 本 章 主要 介绍 页 面 事件 、 触 摸 事 件 、 屏 幕 滚动 事 
件 和 屏幕 方向 改变 事件 。 


”重点 导读 


* 热 悉 页 面 事件 。 
"掌握 触摸 事件 。 

* 掌握 屏幕 滚动 事件 。 
“掌握 屏幕 方向 改变 事件 。 


16.1 页 面 事件 


在 jQuery Mobile 中 与 页 面 进行 “沟通 ”的 事件 大 致 可 以 分 为 以 下 3 种。 

(1) 初始 化 事件 (Page Initialization): 在 页 面 创建 前 ， 当 页 面 创建 时 ， 以 及 在 页 面 初始 化 之 后 触发 该 
件 。 

(2) 加 载 外 部 页 面 事件 (Page Load): 加 载 外 部 页 面 时 触发 该 事件 。 

(3) 页 面 切换 事件 (Page Change): 页 面 切换 时 触发 该 事件 。 

在 jQuery Mobile 中 操作 事件 很 简单 , 使 用 jQuery 中 的 on0 方 法 指定 要 触发 的 
数 就 可 以 了 ， 其 代码 如 下 : 
$5 (document) .on (事件 名 称 , 选择 器 ,事件 处 理 函 数 ) 
ph,， “选择 器 ”可 以 省 略 ， 表 示 事 件 应 用 于 整个 页 


a 16.1.1 ”初始 化 事件 


在 jQuery Mobile 9 
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其 中 


























h， 页面 初 始 化 包括 4 个 





加 件 ， 按 触发 顺序 分 别 是 mobileinit、 pagebeforecreate、pagecreate 


第 国 章 使 用 jQuery Mobile 事件 


和 pageinit。 


1. mobileinit 


在 jQuery Mobile 开始 执行 时 ， 就 会 触发 mobileinit 事件 ， 所 以 需要 把 mobileinit 绑 定 的 函数 放 在 
jQuery.Mobilejs 之 前 ， 其 代码 如 下 : 

<script src="jquery.js"></script> 

<script src="mobileinit 事件 文件 "></script> 

<script src="jquery.mobile-1.4.5.js"></script> 

想 要 更 改 jQuery Mobile 默认 的 设置 时 ， 就 可 以 将 函数 绑 定 到 mobileinit 
就 会 以 mobileinit 文件 中 的 设置 来 取代 原来 的 设置 ， 其 代码 如 下 : 

<script> 

$ (document) .on ("mobileinit",function(){ 


程序 语句 





| 





有 件 上 。 这 样 ，jQuery Mobole 


JE 
</script> 


2. pagebeforecreate 、pagecreate、pageinit 


pagebeforecreate 事件 会 在 页 面 DOM 加 载 后 , 正在 初始 化 时 触发 ; pagecreate 
初始 化 也 完成 时 触发 ，pageinit 是 在 初始 化 之 后 触发 ， 其 代码 如 下 : 
<script> 
$ (document) .on ("pagebeforecreate", function(){ 
程序 语句 
]) 7 
$ (document) .on("pagecreate"，function()1{ 
程序 语句 
]) 
$ (document) .on("pageinit",function()1{ 


程序 语句 








pl 





有 件 是 在 DOM 加 载 完 成 ， 


}) 
</script> 


【 例 16-1】“《 实 例文 件 ，ch16\Chap16.1.html》 初 始 化 事件 实例 ， 其 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script> 
$ (document) .on ("mobileinit",function(){ 
alert ("mobileinit 事件 触发 了 "); 
Ds; 
$ (document) .on ("pagebeforecreate", function(){ 
alert ("pagebeforecreate 事件 触发 了 "); 
Ds; 
$ (document) .on ("pagecreate", function(){ 
alert ("pagecreate 事件 触发 了 "); 
Ws 
$ (document) .on ("pageinit",function(){ 
alert ("pageinit 事件 触发 了 "); 
Ds; 
</script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
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<div data-role="page" id="pagel"> 
<div data-role="header" data-position="fixed"> 
<h1> 初 始 化 事件 </h1> 
</div> 
<div data-role="main"> 
<h2> 初 始 化 事件 触发 顺序 </h2> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 


</body> 
dt localhost localhost 
</html> mobileintt 事 件 钥 发 了 和 | pagebeforecreate 事 件 阳 发 


相关 的 代码 实例 可 参考 Chap16.1.html 文件 ， 在 Opera 








Mobile 模拟 器 中 ,初始 化 事件 触发 顺序 显示 结果 如 图 16-1 所 示 。 h 


16. 


件 ， 


1.2 ”加 载 外 部 页 面 事 件 Pe pe 


本 一 | PE 


[| wi | | wi | 
加 载 外 部 页 面 会 触发 两 个 事件 ， 一 个 是 pagebeforeload 性 
另 一 个 是 当 页 面 载 入 成 功 时 触发 人 事件 ， 载 入 失败 图 惟 直 各 失 化 本 性 总 公 渍 序 








圳 











时 触发 pageloadfailed 事件 。 


1. pageload 
pageload 事件 ， 其 代码 如 下 : 


<script> 
$ (document) .on ("pageload", function (event, data){ 
// 程 序 语句 
Ds 
</script> 


pageload 事件 处 理 函 数 包括 event 和 data 两 个 参数 ， 如 表 16-1 所 示 。 








表 16-1 pageload 事件 参数 





参数 说 明 
event 任何 jQuery 的 事件 属性 ， 例 如 event.target.event.type 
包含 以 下 属性 : 
Wl: 字符 串 类 型 ， 页 面 的 URL 地 址 
data absUrl: 字符 串 类 型 ， 绝 对 路 径 
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dataUrl: 字符 串 类 型 ， 地 址 栏 的 URL 
options: 对 象 类 型 ，$.mobile.loadpage 指定 的 选项 





2. pageloadfailed 事件 
当 页 面 加 载 失败 时 ， 就 会 触发 pageloadfailed 寻 


<script> 
$ (document) .on ("pageloadfailed", function(){ 
// 程 序 语句 
]) 
</script> 








， 上 默认 会 出 现 Error Loading Page 字样 ， 其 代码 如 下 : 





第 国 章 使 用 jQuery Mobile 事件 


16.1.3 页面 切换 事件 
页 面 切换 是 移动 开发 中 不 可 或 缺 的 页 面 特效 之 一 ， 在 jQuery Mobile 中 ， 页 面 切换 的 代码 如 下 : 


$(":mobile-pagecontainer") .pagecontainer ("change", to, [options]); 


To: 表示 想 要 切换 的 目标 页 面 ， 其 值 必须 是 字符 串 或 者 DOM 对 象 ， 内 部 页 面 可 以 直接 指定 DOM 对 













































































象 id 名 称 ， 例 如， 要 切换 到 id 名 称 为 two 的 页 面 ， 可 以 写成 #two。 
options: 该 属性 可 以 省 略 不 写 ， 具体 如 表 16-2 所 示 。 
表 16-2 ”页 面 切换 事件 属性 
属 性 说 明 
transition 切换 页 面 时 使 用 的 转 场 动 画 效果 
默认 值 ，get 
We 当 to 的 目标 是 url 时， 指定 HTTP Method 使 用 get 或 post 
默认 值 : true 
SBA 是 否 要 显示 加 载 中 的 信息 画面 
默认 值 ; false 
Te 页 面 切换 效果 是 否 要 反 向 ， 如 果 设 为 rue， 就 像 模 拟 返 回 上 一 页 的 效果 
默认 值 false 
Re 当 页 面 已 经 在 DOM 中 ， 是 否 要 将 页 面 重新 加 载 
默认 值 ，false 
allowSamePageTransition 是 否 允 许 切换 到 当前 页 面 
默认 值 ， true 
changeHash 是 否 更 新 浏览 记录 。 若 将 属性 设 为 false, 当前 页 面 浏览 记录 会 被 清除 , 用 户 无 法 通过 “上 
一 页 ”按钮 返回 
dataUrl 更 新 地 址 栏 的 URL 





其 中 ，transition 属性 用 来 指定 页 面 转 场 动 画 效果 ， 转 场 动 画 共有 6 种 ， 如 表 16-3 所 示 。 





表 16-3 transition 属性 的 转 场 动画 效果 




















转 场 动 画 效果 说 ”有 明 
slide 从 右 到 左 
slideUp 从 下 到 上 
slideDown 从 上 到 下 
fade 淡出 淡 入 
pop 从 小 到 大 
flip 2D 或 3D 旋转 动画 ， 只 有 支持 3D 效果 的 设备 才能 使 用 


【 例 16-2】 实例 文件 ，ch16\Chap16.2.html)》 页 面 切换 事件 实例 。 代 码 如 下 : 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
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jquery.js"></script> 
query-mobile-1.4.5.js"></script> 






</head> 
<body> 
<div data-role="page"”id="pagel"> 
<div data-role="header" data-position="fixed"> 
<h1> 页 面 切换 事件 </h1> 
</div> 
<div data-role="main"> 
<ul data-role="listview"> 
<1i><a href="#"” id="two"> 苹 果 </a></1i> 
<1i><a href="#"> 香 莱 </a></1i> 
<1i><a href="#"> 蔷 果 </a></1i> 
</ul> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
<div data-role="page" id="page2"> 
<div data-role="header" data-position="fixed"> 


<h1> 页 面 切换 事件 </h1> 
<a href="#”id="first"> 返 回 上 一 页 </a> 
</div> 


<div data-role="main"> 
<img src="1.gif" alt=""> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 
</html> 
<script> 
$ (document) .one ("pagecreate", "#pagel", function (){ 
$("#two") .on ("click", function(){ 
$(":mobile-pagecontainer") .pagecontainer ("change","#page2",{ 
transition:"slidedown™ 
} 
]) 
Sseirst on en rnin [Gow - o x Go - DO Xx 
$(":mobile-pagecontainer"). 
pagecontainer ("change","#pagel", { 


[coose feocalhosUC/Usen 页 
transition: "pop" 


}) 页 面 切 换 事件 返回 上 一 页 | 页 面 切 换 事件 
)) 区” 
ee bs 
相关 的 代码 实例 可 参考 Chap16.2.html 文 件 , 在 “| ™ 
Opera Mobile 模拟 器 中 显示 效果 如 图 16-2 所 示 。 当 
单 击 “ 苹 果 ” 按 钮 时 ，page2 容器 将 以 从 上 到 下 的 动 
画 显示 出 来 ， 页 面 如 图 16-3 所 示 ， 当 单 击 page2 容 
器 中 的 “返回 上 一 页 ”按钮 时 ，pagel 容器 将 以 从 小 
到 大 的 动画 效果 显示 。 
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图 16-2 page1 页 面 图 16-3 page2 页 面 





340 





第 国 章 使 用 jQuery Mobile 事件 


16.2 触摸 事件 


触摸 事件 在 用 户 触摸 屏幕 时 触发 ， 包 括 5 种 类 型 ,分 别 是 tap ( 单 击 ) 事件 、taphold ( 单 击 不 放 ) 事件 、 
swipe〔 滑 动 ) 事件、swipeleft (向 左 滑动 ) 事件 和 swiperight (向 右 划 动 ) 事件。 


16.2.1 tap 事件 和 taphold 事件 


1.tap 事件 
户 单 击 元 素 时 触发 ， 其 代码 如 下 : 
$("p").on("tap", function(){ 


$ (this) .hide(); 
ys 


上 面 代码 表示 当 单 击 <p> 元 素 时 ， 就 会 在 页 面 中 隐藏 该 <p> 元 素 。 


2. taphold 事件 
户 完成 一 次 单 击 页 面 屏幕 且 保持 不 放 (大 约 1s) 时 触发 ， 其 代码 如 下 : 


5("p") .on("taphold",function(){ 
S$(this) .hide()7 


上 面 代码 表示 当 单 击 <p> 元 素 不 放 ， 大 约 1s 后 ， 就 会 在 页 面 中 隐藏 该 元 素 。 
【 例 16-3】 实例 文件 ，ch16\Chap16.3.html)》tap 事件 和 taphold 事件 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header" data-position="fixed"> 
<h1> 页 面 事件 </h1> 
</div> 
<div data-role="main"> 
<div id="bgcolorl"><hl>tap 事件 </hl></div> 
<div id="bgcolor2"><hl>taphold 事件 </hl></div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 
</html> 
<script> 
$ (function(){ 
$("#bgcolorl") .on("tap",function(){ 
$("#bgcolor1") .css({"background":"red", 'color"':"#fff"}) 
]) 7 
$("#bgcolor2") .on ("taphold",function (){ 
$ ("#bgcolor2") .css ({"background":"blue", 'color' :"#fff"}) 
a 























































































































1D) 
</script> 
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相关 的 代码 实例 可 参考 Chap16.3.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 效果 如 图 16-4 所 示 。 触 发 
事件 和 taphold 事件 后 页 面 显 示 效 果 如 图 16-5 所 示 。 
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变 成 红色 , 字 
tap 事 件 休 颜 色 交 为 掉 。 人 3 





ltaphold 事 件 






Hh 












是- 
ie Ops ao prt zit [oem 
图 16-4 页面 加 载 完成 时 效果 图 16-5 触发 tap 事件 和 taphold 事件 后 页 面 效果 


16.2.2 ”swipe 事件 
swipe (滑动 ) 事件 是 用 户 在 1s 内 水 平 拖 动 屏幕 大 于 30px 时 触发 ， 其 代码 如 下 : 


$("p") .on("swipe",function() 1 
5("span") .text ("你 滑动 屏幕 了 !"); 
pn 


上 面 代 码 表 示 当 在 某 一 个 <p> 元 素 中 滑动 屏幕 时 ， 在 页 面 的 <span> 标 签 中 显示 相应 的 信息 。 
【 例 16-4】〔 实 例文 件 ，ch16\Chap16.4.html)〉swipe 事件 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header" data-position="fixed"> 
<hl>swipe 事件 </h1> 
</div> 
<div data-role="main"> 
<img src="1.jpg" alt=""> 
<h2></h2> 
</div> 
<div data-role="footer" data-position="fixed"> 
<hl1> 尾 部 </h1l> 
</div> 
</div> 
</body> 
</html> 
<script> 
$ (function(){ 
$ ("img") .on ("swipe", function () { 


$("h2") .text ("滑动 屏幕 了 !"); 











加 
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Ms 
DD) 
</script> 


相关 的 代码 实例 可 参考 Chap16.4.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 效果 如 图 16-6 所 示 。 在 图 
片上 左右 滑动 时 触发 swipe 事件 ，h2 标签 显示 “滑动 屏幕 了 ”， 页 面 效 果 如 图 16-7 所 示 。 
ED 





























BD 图 片上 左右 滑动 孝 会 朋 
外 发 svipo 浊 动 字 件 一] 


WA 











ee pr 
本 图 16-7 触发 swipe 事件 后 页 面 效果 
16.2.3 swipeleft 事件 和 swiperight 事件 
1. swipeleft 事件 


swWipeleft 〈 向 左 滑动 ) 事件 是 用 户 向 左 侧 滑动 屏幕 大 于 30px 时 触发 的 事件 ， 其 代码 如 下 : 
$("p").on("swipeleft", function(){ 
alert ("向 左 滑动 !"); 
]) 
上 面 代 码 表示 当 在 屏幕 某 一 个 <p> 元 素 中 向 左 滑动 屏幕 时 ， 在 页 面 的 <span> 标 签 中 显示 相应 的 信息 。 


2. swiperight 事件 
swiperight (向 右 滑动 事件 是 用 户 向 右 侧 滑动 屏幕 大 于 30px 时 触发 的 事件 ， 其 代码 如 下 : 


$("p").on("swiperight", function(){ 
alert ("向 右 滑动 !"); 
DD); 


上 面 代码 表示 当 在 屏幕 某 一 个 <p> 元 素 中 向 右 滑动 屏幕 时 ， 在 页 面 的 <span> 标 签 中 显示 相应 的 信息 。 
【 例 16-5】 《实例 文件 :chl16\Chap16.5.html) swipeleft 事件 和 swiperight 事件 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=]1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header”data-position="fixed"> 
<hl>swipeleft 和 swiperight 事件 </h1> 
</div> 
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<div data-role="main"> 
<img src="2.jpg" alt=""> 
<h2 class="left"></h2> 
<h2 class="right"></h2> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 
</html> 
<script> 
$ (function(){ 
$("img") .on("swipeleft", function(){ 
$5(".left") .text ("向 左 滑动 屏幕 了 !"); 
}) .on("swiperight",function(){ 
$(".right") .text ("向 右 滑动 屏幕 了 !"); 
Ds 
1) 
</script> 


相关 的 代码 实例 可 参考 Chap16.5.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 效果 如 图 16-8 所 示 。 在 图 
片上 向 左 滑动 时 触发 swipeleft 事件 ， 向 右 滑动 时 触发 swiperight 事件 ， 页 面 效 果 如 图 16-9 所 示 。 








@opnvo. 一 0O x 
evrocanosucsuser 友 芽 :ee 】 


swipeleft 和 sw.. 







在 图 片上 向 左 滑动 


在 图 片上 向 右 滑动 














触发 向 左 涓 动 事 
件 swipelett 
有 发 向 右 江 动 于 
件 swiperight 
尾部 
已 加 “< 
16-8 ”页面 加 载 完成 时 效果 16-9 触发 swipeleft 事件 和 swiperight 事件 后 页 面 效果 


16.3 ”屏幕 滚动 事件 











jQuery Mobile 提供 了 两 种 滚屏 事件 : 滚屏 开始 时 触发 和 滚动 结束 时 触发 。scrollstart 事件 是 在 用 户 开始 
滚动 页 面 时 触发 ，scrollstop 事件 是 在 用 户 停止 滚动 页 面 时 触发 。 代 码 如 下 : 
ee .on("scrollstart", function(){ 
alert ("开始 滚动 了 !"); 


Di; 
$ (document) .on ("scrollstop", function(){ 
alert ("停止 滚动 了 !"); 
有 
</script> 


【 例 16-6】〔 实 例文 件 ，ch16\Chap16.6.html)〉 屏 幕 滚动 
























































ji 





有 件 实 例 。 代 码 如 下 : 
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<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header" data-position="fixed"> 


<h1> 屏 幕 滚动 事件 </h1> 





="main"> 
start"></h2> 
stop"></h2> 
<p> 屏 幕 滚 动 了 </p> 
<p> 屏 幕 滚 动 了 </p> 
<p> 屏 幕 滚动 了 </p> 
<p> 屏 幕 滚 动 了 </p> 
<p> 屏 幕 滚 动 了 </p> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 
</html> 
<script> 
$ (function(){ 
$("#pagel") .on("scrollstart", function(){ 
5(".start") .text ("屏幕 开始 滚动 了 !"); 
}) .on("scrollstop", function(){ 
$5(".stop") .text ("屏幕 停止 滚动 了 !"); 
]) 7 
}) 
























</script> 
相关 的 代码 实例 可 参考 Chap16.6.html 文件 ， 在 Opera Mobile 模拟 器 中 显示 效果 如 图 16-10 所 示 。 当 在 
pagel 容器 中 滚动 屏幕 时 ， 触 发 scrollstart 事件 和 scrollstop 事件 ， 页 面 显示 效果 如 图 16-11 所 示 。 
©@ opera Mo- 
GE 
屏幕 浪 动 事件 
[mma 页 面 开始 滚动 时 触发 
a 页 面 停止 滚动 时 触发 
mai 
jmsaa 
LG Opti 430x80 Ppl: 21€ Da 50% LG Opti 480xB0 PPl: 21 Qs) 50% ~ 
图 16-10 ”页面 加 载 完成 时 效果 图 16-11 触发 scrollstart 事件 和 scrollstop 事件 页 面 显示 效果 
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16.4 ”屏幕 方向 改变 事件 


在 jQuery Mobile 事件 中 ， 当 用 户 垂直 或 水 平 旋转 移动 设备 时 ， 将 触发 方向 改变 (orientationchange ) 
件 。 在 该 事件 中 ， 可 以 通过 获取 回调 函数 中 的 orientation 属性 ， 从 而 判断 用 户 手持 设备 的 方向 。orientation 
属性 有 两 个 值 ， 分 别 是 landscape 和 portrait，landscape 表示 水 向 ，portrait 表示 垂直 方向 。 

【 例 16-7】 (实例 文件 ，ch16\Chap16.7.html) 屏幕 方向 改变 事件 实例 。 代 码 如 下 ; 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header" data-position="fixed"> 
<h1> 屏 幕 滚动 事件 </h1> 
</div> 
<div data-role="main"> 
<h2></h2> 
<img src="3.jpg" alt=""> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h1> 尾 部 </h1> 
</div> 
</div> 
</body> 
</html> 
<script> 
$ (document) .on ("pageinit", function (event){ 
$ (window) .on ("orientationchange", function (event){ 





hl 





= 
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if(event .orientation=="landscape"){ 


$("h2") .text ("现在 是 水 平 模式 ") 





} 
if(event.orientation=="portrait"){ 
5("h2") .text ("现在 是 季 直 模式 ") 
$ 
Ds; 
Ds 
</script> 





相关 的 代码 实例 可 参考 Chap16.7.html 文件 ， 在 


Opera Mobile 模拟 器 中 显示 效果 如 图 16-12 所 示 。 单 击 pa 











页 面 中 改变 手机 方向 的 按钮 , 页 面 中 显示 “现在 是 水 平 
模式 ” 效果 如 图 16-13 所 示 。 当 再 单 击 一 次 改变 手 
方向 的 按钮 ， 页 面 显 示 “ 现 在 是 垂直 模式 ” 效果 如 图 Le| 
16-14 所 示 。 图 16-12 页 面 加 载 完成 时 的 效果 
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口 团 
图 16-13 设备 水 平 模式 图 16-14 设备 垂直 模式 


16.5 ”就业 面试 技巧 与 解析 
16.5.1 面试 技巧 与 解析 (一 ) 





























面试 官 : 在 jQuery Mobile 中 ， 当 不 同 的 页 面 间或 同一 个 页 面 不 同 容器 间 相 互 切换 时 ， 将 触发 页 面 中 的 


显示 或 隐藏 事件 ， 具 体 的 事件 类 型 有 哪 几 种 ? 
应 聘 者 : 有 以 下 4 种 。 
(1) pagebeforeshow: 页 面 显示 前 事件 。 
(2) pagebeforehide: 页 面 隐 藏 前 事件 。 
(3) pageshow: 页 面 显示 完成 事件 。 
(4) pagehide: 页 面 隐藏 完成 事件 。 


16.5.2 面试 技巧 与 解析 〈 二 ) 











面试 官 : 在 jQuery Mobile 页 面 中 ， 尽 管 Ajax 跳 转 有 很 炫 酷 的 转 屏 动画 ， 但 是 在 某 些 时 候 为 了 性 能 或 


者 业务 需求 还 是 需要 进 制 Ajax 跳 转 的 ， 请 问 如 何 禁止 Ajax 跳 转 ? 
应 聘 者 : 禁止 Ajax 跳 转 ， 根 据 作用 范围 ， 有 以 下 两 种 方法 。 























第 一 种 方法 ， 禁 止 局 部 Ajax 跳 转 ， 只 需要 在 <a> 标 签 中 添加 data-ajax="false" 类 别 属性 。 有 了 时候 ， 我 们 





























性 类 别 ， 可 以 将 链接 指定 为 正常 的 http 请 求 。 
第 二 种 方法 ， 禁 止 全 局 Ajax 跳 转 。 需 要 在 jQuery Mobile 页 面 初始 化 mobileinit 寻 





Ajax 跳 转 ， 在 jquery.mobilejs 文件 前 面 添加 如 下 代码 : 
<script> 
$ (document) .bind ("mobileinit", function() { 
$.mobile.ajaxEnabled=false; 
Fr 
</script> 


件 


正常 的 http 请 求 而 不 用 Ajax 请 求 ， 如 链接 到 其 他 网 站 等 情况 ， 通 过 给 <a> 标 签 添加 rel-"extermal" 属 





ph 设置 全 局 禁止 
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第 17 章 
使 用 jQuery Mobile 插件 


WP 学 习 指 引 


jQuery Mobile 中 有 许多 优秀 而 又 实用 的 jQuery Mobile 插件 ， 类 型 其 广 ， 从 日 期 /时 间 选 择 、 抽 居 式 导 
航 菜单 、 手 风琴 导航 、 隐 藏 /显示 密码 ， 到 灯箱 特效 、 交 互 式 地 图 、 页 面 震 动 、 相 册 / 画 廊 展 示 等 ， 本 章 主 要 
介绍 其 中 一 部 分 插件 . jQuery Mobile 具有 很 强 的 可 扩展 性 , 在 jQuery Mobile 开发 过 程 中 可 以 融入 很 多 优秀 
的 jQuery Mobile 插件 ， 使 移动 开发 更 加 轻松 。 


< 全” 重点 导读 


。 的 悉 使 用 Camera 插件 实现 焦点 轮 播 图 效果 。 

。 熟 悉 使 用 SwipeBox 插件 实现 查看 大 图 效果 。 

。 热 悉 使 用 mmenu 插件 实现 侧 边栏 效果 。 

。 热 悉 使 用 DateBox 插件 实现 日 期 和 时 间 的 选择 效果 。 

。 熟悉 使 用 Mobiscroll 插件 实现 滚屏 选择 日 期 和 时 间 的 效果 。 


17.1 Camera 插件 


Camera 插件 是 一 个 基于 jQuery Mobile 插件 的 开源 项 目 ， 主 要 用 来 实现 轮 播 图 特效 。 在 轮 播 中 ， 用 户 
可 以 查看 每 一 张 图 片 的 主题 信息 ， 手 动 终止 播放 过 程 。 

Camera 插件 的 官方 下 载 地 址 为 : https://github.com/pixedelic/Camera。 

【 例 17-1】〔 实 例文 件 ，ch17\Chap17.1.html》 使 用 Camera 插件 实现 轮 播 图 实例 。 代 码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>camera 插件 应 用 程序 </title> 















































<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery-1.8.3.min.js"></script> 
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<script src="jquery.mobile-1.4.5.js"></script> 
<link rel="stylesheet" href="camera/css/camera.css"> 
<script src="camera/js/jquery.easing.1.3.js"></script> 
<script src="camera/js/camera.js"></script> 
</head> 
<body> 
<div data-role="page"> 
<div data-role="header"> 
<hl>camera 插件 </h1> 
</div> 
<div data-role="main" class="camera wrap camera azure skin" id="cameral"> 
<div data-src="camera/image/slides/01.jpg"> 
<div clas camera caption fadeFromBottom"> 
第 一 张 
</div> 
</div> 
<div data-sr 





camera/image/slides/02.jpg"> 
"camera caption fadeFromBottom"> 





</div> 
</div> 
<div data-sr 






camera/image/slides/03.jpg"> 






<div clas camera_caption fadeFromBottom"> 
第 三 张 
</div> 
</div> 
<div data-sr camera/image/slides/04.jpg"> 
<div clas camera_ caption fadeFromBottom"> 
第 四 张 
</div> 
</div> 
</div> 
<div data-role="footer" data-position="fixed"> 
<h4> 尾 部 </h4> 
</div> 
</div> 
</body> 
<acripty 
人 am am 
time:1000, 
thumbnails:false 
1) 
a 
</script> 
</html> 


相关 的 代码 实例 可 参考 Chap17.1.html 文件 ， 在 
Opera Mobile 模拟 器 中 预览 效果 如 图 17-1 所 示 。 

分 析 : 

在 <head> 与 </head> 标 签 中 添加 <meta> 标 签 , 设置 和 
加 载 jQuery Mobile 函数 库 代 码 , 与 前 面 案例 相同 。 然 后 
需要 引入 Camera 插件 相应 的 CSS 文件 和 JavaScript 脚 
本 文件 ， 代 码 如 下 ; 国 S909 守 现 爷 乔 几 























<link rel="stylesheet" href="camera/css/camera.css"> 
<script src="camera/js/jquery.easing.1.3.js"></script> 
<script src="camera/js/camera.js"></script> 


349 


ZN 
HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 


在 <body> 与 </body> 标 签 中 编写 了 jQuery Mobile 页 面 代码 。 在 内 容 区 域 中 添加 一 个 <div> 标 签 作为 放置 
轮 播 图 片 的 容器 ， 并 在 该 <div> 标 签 中 设置 id 名 称 为 cameral， 类 样式 名 称 为 camera_wrap。 在 该 容器 中 ， 
同时 使 用 <div> 标 签 添加 被 轮 播 的 图 片 ， 每 一 个 轮 播 图 片 的 代码 结构 都 是 相同 的 。 
在 页 面 中 ， 所 有 的 图 片 元 素 都 添加 完成 后 ， 还 需要 在 页 面 初始 化 事件 中 调用 Camera 插件 的 camera() 
方法 ， 才 能 实现 执行 该 页 面 时 图 片 容器 中 的 图 片 以 幻灯 片 形式 轮 播 的 效果 。 其 代码 如 下 : 
站 汽 
$('#cameral') .camera({ 


time:1000, 
thumbnails:false 


















































可 












































]) 
Ds; 
</script> 


17.2 ”SwipeBox 插件 


SwipeBox 是 一 款 支 持 桌面 、 移 动 触摸 手机 和 平板 计算 机 的 jQuery 灯箱 插件 。SwipeBox 插件 支持 手 村 
的 触摸 手势 ， 支 持 桌 面 计 算 机 的 键盘 导航 ， 并 且 支 持 视频 的 播放 。 不 支持 CSS 3 过 渡 特 性 的 浏览 器 可 使 
jQuery 降级 处 理 ， 支 持 视网膜 显示 ， 能 够 通过 CSS 轻松 定制 。 

当 用 户 单 击 缩 略 图 片 时 ， 图 片 将 会 以 大 图 尺寸 方式 展示 。 另 外 ， 用 户 还 可 以 对 同 组 的 图 片 通过 左右 
换 来 进行 查看 ， 非 常 适合 用 于 做 照片 画廊 以 及 查看 大 尺寸 图 片 。 

SwipeBox 插件 下 载 地 址 为 : http://brutaldesign.github.io/swipebox/。 

【 例 17-2】”〈 实 例文 件 ，ch17\Chap17.2.html》 使 用 Swipebox 插件 实现 查看 大 图 实例 。 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>SwipeBox 插件 应 用 程序 </title> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
<link rel="stylesheet" href="Swipebox/css/swipebox.css"> 
<script src="Swipebox/js/jquery.swipebox.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header" data-theme="b"> 
<hl>SwipeBox 插件 </hl> 
</div> 
<div data-role="main"> 
<a href="Swipebox/img/01.jpg" class="box1"> 
<img src="Swipebox/img/01.jpg" alt="" width="150px"> 
</a> 
<a href="Swipebox/img/02.jpg" class="box2"> 
<img src="Swipebox/img/02.jpg" alt="" width="150px"> 
</a> 
<a href="Swipebox/img/03.jpg" class="box3"> 
<img src="Swipebox/img/03.jpg" alt="" width="150px"> 
</a> 
<a href="Swipebox/img/04.jpg”" class="box4"> 
<img src="Swipebox/img/04.jpg" alt="" width="150px"> 












































过 
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</a> 
</div> 
</div> 
</body> 
<script> 
(function($) { 
$('.boxl') .swipebox(); 
$('.box2') .swipebox( 
$('.box3') .swipebox(); 
$('.box4') .swipebox(); 
1) (jQuery); 
</script> 
</html> 


相关 的 代码 实例 可 参考 Chap17.2.html 文件 , 在 
Opera Mobile 模拟 器 中 预览 效果 如 图 17-2 所 示 。 单 
击 其 中 最 后 一 张 图 片 ， 将 显示 对 应 的 大 图 ， 如 图 


17-3 所 示 。 本 一 一 一 ppt ate 国 [50% | 


分 析 : 17-2 灯箱 效果 17-3 显示 大 图 效果 
在 <head> 与 </head> 标 签 中 添加 <meta> 标 签 , 设 
置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 案例 相同 ， 然 后 需要 引入 SwipeBox 插件 相应 的 CSS 文件 和 
JavaScript 脚本 文件 。 代 码 如 下 : 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 


<link rel="stylesheet" href="Swipebox/css/swipebox.css"> 
<script src="Swipebox/js/jquery.swipebox.js"></script> 


在 <body> 与 </body> 标 签 中 编写 了 jQuery Mobile 页 面 代 码 。 在 页 面 的 内 容 区 域 插入 各 图 片 的 缩 略 图 ， 
为 各 缩 略 图 添加 <a> 标 签 ， 并 设置 它 的 href 属性 值 为 缩 略 图 对 应 的 原始 大 图 片 。 在 每 个 <a> 标 签 中 设置 一 个 
class 属性 ， 用 于 与 SwipeBox 插件 相 绑 定 。 
在 <script> 与 </script> 标 签 中 的 脚本 代码 用 于 页 面 中 相对 应 的 类 属性 元 素 调用 SwipeBox 插件 swipebox() 
的 方法 。 代 码 如 下 : 
<script> 
(function($) { 
$('.boxl') .swipebox (); 
$('.box2') .swipebox(); 
$('.box3') .swipebox (); 
$('.box4') .swipebox (); 


}) (jQuery); 
</script> 
































ts Opsi 430x30l ppt: 21t 国 [50% = 
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17.3 mmenu 插件 














mmenu 是 一 款 用 于 创建 平滑 导航 菜单 的 jQuery Mobile 插件 ， 只 需 很 少 的 JavaScript 代码 ， 即 可 在 移动 
网 站 中 实现 非常 酷 炫 的 滑动 菜单 。 

mmenu 插件 官方 下 载 地 址 为 : http://mmenu .frebsite.nl/download.html。 

【 例 17-3】 实例 文件 ，ch17\Chap17.3.html) 使 用 mmenu 插件 实现 侧 边栏 实例 。 代 码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 


<meta charset="UTF-8"> 
<title>mmenu 插件 应 用 程序 </title> 
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<meta name="viewport" content="width=device-width,initial-. 


<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery-1.9.0.min.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
<link rel="stylesheet" href="mmenu/css/style.css"> 
<link rel="stylesheet" href="mmenu/css/jquery.mmenu.css"> 
<script src="mmenu/js/jquery.mmenu.js"></script> 
</head> 
<body> 
<div data-role="page"” id="pagel" data-theme="f"> 
<div data-role="header" data-theme="b"> 
<div class="1 tbn"> 
<a href="#menu"><img src="mmenu/image/04.jpg"” alt=" 
</div> 
<hl>mmenu 插件 实现 侧 边 栏 </h1> 
<nav id="menu"> 
<ul> 
<li class="Selected"><a href="#"> 首 页 </a></1i> 





<li><a href="#"> 公 司 简介 </a></1i> 
<1i><a href="#"> 公 司 作品 </a></1i> 
<li><a hre: "> 完成 作品 </a></1i> 
<li><a href="#"> 招 聘 信息 </a></1i> 
</ul> 
</nav> 
era Mo 一 口 
</div> em 
<div data-role="main"></div> 
</div> Loe 
</body> 个 mmenu 播 件 实 
<script> 


$(function() { 
$('navimenu') .mmenu() 
Ds; 
</script> 
</html> 


相关 的 代码 实例 可 参考 Chap17.3.html 文件 ， 
在 Opera Mobile 模拟 器 中 预览 效果 如 图 17-4 所 示 。 


Ea 


2 
和 
局 


Wy 
Ci 


Hy 

当 单 击 左 上 角 的 图 标 时 , 可 以 在 左 侧 显 示 侧 边 菜单 | a $ 

栏 ， 如 图 17-5 所 示 。 /和 入 
分 析 : > 号 国 - 














在 <head> 与 </head> 标 签 中 添加 <meta> 标 签 ， 
设置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 案 
例 相同 。 然 后 需要 引入 mmenu 插件 相应 的 CSS 文 
件 和 JavaScript 脚本 文件 ， 代 码 如 下 : 


<link rel="stylesheet" href="mmenu/css/style.css"> 
<link rel="stylesheet" href="mmenu/css/jquery.mmenu.css"> 
<script src="mmenu/js/jquery.mmenu.js"></script> 


在 <body> 与 </body> 标 签 中 编写 了 jQuery Mobile 页 面 代 码 。 
在 <scrip 们 与 </scrip 亿 标签 中 的 脚本 代码 页 面 加 载 完 毕 之 后 调 
如 下 : 
<script> 
$ (function() { 
$ ('navimenu') -mmenu () 


hs 
</script> 
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图 17-4 ”页 面 加 载 效 果 


3cale=1"> 


" width="30px"></a> 


@ operaMo.， 一 项 


fiewiocainosvcvuser 太 芽 60 】 


口 


A 


器 团 -… 
图 17-5 在 左 侧 显 示 侧 边 
菜单 栏 效果 


mmenu 插件 的 mmenu() 方 法 ,代码 


第 鲍 章 使 用 jQuery Mobile 插件 


17.4 ”DateBox 插件 


DateBox 是 选择 日 期 和 时 间 的 jQuery Mobile 插件 ， 使 用 该 插件 可 以 在 弹出 的 窗 
时 间 的 对 话 框 ， 只 需 6 某 个 选项 ， 便 可 以 完成 日 期 的 选择 。 

DateBox 插件 官方 下 载 地 址 为 :https://github.com/jtsage/jquery-mobile-datebox。 

【 例 17-4】 实例 文件 ，ch17\Chap17.4.html》 使 用 DateBox 插件 实现 日 期 和 时 间 的 选择 实例 。 代 码 如 下 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>DateBox 插件 应 用 程序 </title> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src-"jquery.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
<link rel=" 证 href="datebox/css/jqm-datebox.css"> 
<script src="datebox/js/jqm-datebox.core.js"></script> 
<script src="datebox/js/jqm-datebox.comp.calbox.js"></script> 
<script src="datebox/js/jqm-datebox.comp.datebox.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header" data-theme="b"> 
<h1>DateBox 插件 </h1> 
</div> 
<div data-role="main"> 
<p> 选 择 日 期 </p> 
<input type="text" id="datel" readonly data-role="datebox" data-options="'{"mode":"datebox"}'> 
<p> 选 择 时 间 </p> 
<input type="text" id="date2" readonly data-role="datebox" data-options='{"mode":"timebox"}'> 
</div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 可 参考 Chap17.4.html 文件 ， 在 Opera Mobile 模拟 器 中 预览 效果 如 图 17-6 所 示 。 当 单 
击 文本 输入 框 右边 图 标 时 ， 可 以 弹出 选择 日 期 和 时 间 的 对 话 框 ， 如 图 17-7 所 示 。 选 择 需 要 的 时 间 ， 操 作 完 
成 后 ， 最 终 页 面 显示 效果 如 图 17-8 所 示 。 


@opmvo. - O x @oprawe- - OO x 








el 





ph 显 示 选 择 日 期 或 者 
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图 17-6 ”页面 加 载 效 果 17-7 选择 日 期 和 时 间 对 话 框 图 17-8 最 终 效果 
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NE 


分 析 : 
在 <head> 与 </head> 标 签 中 添加 <meta> 标 签 ， 设置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 案例 相同 。 
然后 需要 引入 DateBox 插件 相应 的 CSS 文件 和 JavaScript 脚本 文件 ， 代 码 如 下 : 


<link rel="stylesheet" href="datebox/css/jqm-datebox.css"> 
<script src="datebox/js/jqm-datebox.core.js"></script> 

<script src="datebox/js/jqm-datebox.comp.calbox.js"></script> 
<script src="datebox/js/jqm-datebox.comp.datebox.js"></script> 


在 <body> 与 </body> 标 签 中 编写 了 jQuery Mobile 页 面 代 码 。 在 页 面 的 内 容 区 域 创建 了 两 个 文本 域 ， 一 

个 用 于 选择 日 期 ， 一 个 用 来 选择 时 间 。 两 个 文本 域 中 都 设置 了 data-role="datebox" 属 性 类 别 ， 用 于 绑 定 页 面 

的 文本 域 元素 。 在 选择 日 期 的 文本 域 中 设置 data-options='{"mode":"datebox"}' 属 性 类 别 ， 在 选择 时 间 的 文 

本 域 中 设置 data-options='{"mode":"timebox"}' 属 性 类 别 ， 通 过 data-options 属性 设置 各 选项 配置 。 在 浏览 页 
对， 在 文本 域 的 右 侧 有 一 个 小 图 标 ， 单 击 图 标 将 弹出 相应 的 日 期 或 时 间 选 择 对 话 框 。 










































































17.5 ”Mobiscroll 插件 


Mobiscroll 和 DateBox 插件 一 样 ， 也 是 一 款 很 不 错 的 日 期 和 时 间 选 择 的 jQuery Mobile 插件 ， 用 户 可 以 
通过 旋转 滚动 来 选择 日 期 和 时 间 。 
Mobiscroll 插件 支持 任意 自 定义 值 , 并 且 可 以 自 定义 主题 。 另外 , 也 可 以 自 定义 选择 日 期 和 时 间 的 风格 ， 


如 Android、iOS 等 。 
Mobiscroll 插件 使 用 起 来 非常 简单 ， 只 需要 在 页 面 中 为 相应 的 文本 域 元 素 设置 id 名 称 ， 编 写 相应 的 
JavaScript 脚本 代码 ， 将 文本 域 与 Mobiscroll 插件 绑 定 ， 就 可 以 实现 单 击 绑 定 的 文本 域 来 选择 日 期 或 时 间 。 


Mobiscroll 插件 的 官方 下 载 地 址 为 :http://www.mobiscroll.com/。 
【 例 17-5】 (实例 文件 ，ch17\Chap17.5.html) 使 用 Mobiscroll 插件 实现 滚屏 选择 日 期 和 时 间 。 代 码 


如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>mobiscroll 插件 应 用 程序 </title> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="jquery.mobile-1.4.5.css"> 
<script src="jquery-1.9.0.min.js"></script> 
<script src="jquery.mobile-1.4.5.js"></script> 
<link rel="stylesheet" href="mobiscroll/css/mobiscroll.custom-2.4.4.min.css"> 
<script src="mobiscroll/js/mobiscroll.custom-2.4.4.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="pagel"> 
<div data-role="header"> 
<hl>Mobiscroll 插件 </hl> 
</div> 
<div data-role="main"> 
<h3> 今 年 高 考 开始 时 间 </h3> 
<p> 选 择 日 期 </p> 
<input type="text"” id="datel”placeholder=" 请 选择 日 期 "> 
<p> 选 择 时 间 </p> 
<input type="text” id="timel”placeholder=" 请 选择 日 期 "> 
</div> 
</div> 
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</body> 
<script> 
S$(function (){ 
S$("#datel") .mobiscroll() .date ({ 


display: "bottom',// 设 置 显 示 位 置 
theme:"ios"，// 设 置 主题 风格 
yearText:' 年 '， 
monthText:' 月 '， 
dayText:' 日 ', 
dateOrder:'yyyymmdd'，// 面 板 中 日 期 排列 格式 
setText:' 确 认 '，// 确 认 按 钮 名 称 
cancelText:' 取 消 '，// 取 消 按钮 名 称 
Ds 
$("#timel") .mobiscroll () .time ({ 
display:'bottom', 
theme:"ios", 
setText:' 确 认 '， 
cancelText:' 取 消 ' 
Ds; 
1) 
</script> 
</html> 


第 国 章 使 用 jQuery Mobile 插件 


相关 的 代码 实例 可 参考 Chap17.5.html 文件 ， 在 Opera Mobile 模拟 器 中 的 预览 效果 如 图 17-9 所 示 。 当 





击 文本 输入 域 时 ， 可 以 弹出 旋转 滚动 选择 日 期 和 时 间 的 对 话 框 ， 如 图 17-10 所 示 。 选 择 需要 的 时 间 ， 操 作 








单 
完成 后 ， 最 终 页 面 显示 效果 如 图 17-11 所 示 。 
@@operavo. - 0O x © opera vo- 
Mobiscroll 插件 
| 今年 高 考 开始 时 间 
| 选择 日 期 
harm 


Mobiscroll 插件 
今年 高 考 开始 时 间 
汉 皇 昌明 
06/07/2018 
CE] 


00:00ANM 
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图 17-9 页 面 加 载 效果 图 17-10 ”弹出 选择 日 期 和 时 间 对 话 框 图 17-11 最 终 


分 析 : 


效果 


在 <head> 与 </head> 标 签 中 添加 <meta> 标 签 ， 设 置 和 加 载 jQuery Mobile 函数 库 代 码 ， 与 前 面 案 例 相同 。 


然后 ， 需 要 引入 Mobiscroll 插件 相应 的 CSS 文件 和 JavaScript 脚本 文件 





F， 代 码 如 下 : 


<link rel="stylesheet" href="mobiscroll/css/mobiscroll.custom-2.4.4.min.css"> 
<script src="mobiscroll/js/mobiscroll.custom-2.4.4.min.js"></script> 





在 <body> 与 </body> 标 签 中 编写 了 jQuery Mobile 页 面 代 码 。 在 页 
选择 日 期 ， 一 个 用 来 选择 时 间 。 在 两 个 文本 域 中 分 别 设置 id 名 












































引信 











在 <scrip 人 与 </scrip 亿 标签 中 的 脚本 代码 用 于 将 不 同 id 名 称 的 文本 : 




















域 与 Mobiscroll 插件 绑 定 ， 并 


面 的 内 容 区 域 创建 了 两 个 文本 域 ， 一 
尔 ， 后 面 通过 JavaScript 脚本 代码 将 
同 id 名 称 的 文本 域 与 Mobiscroll 插件 绑 定 ， 实 现 弹 出 不 同日 期 和 时 间 的 选择 窗口 。 


设置 插 





355 


A 一 SN 
HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 
RN 


件 的 一 些 参 数 。 代 码 如 下 : 
<script> 
$ (function(){ 
$("#datel") .mobiscroll () .date({ 


display: 'bottom'， // 设 置 显示 位 置 
theme:"ios", // 设 置 主题 风格 


yearText:' 年 '， 
monthText:' 月 '， 


dayText:' 日 ', 

dateOrder: 'yyyymmdd', // 面 板 中 日 期 排列 格式 
setText:' 确 认 '， // 确 认 按钮 名 称 
cancelText: "取消 '， // 取 消 按钮 名 称 


$("#timel") .mobiscroll() .time({ 
display:'"bottom' 
theme:"ios", 
setText:' 确 认 '， 
cancelText:' 取 消 ' 

Ds 


}) 
</script> 


17.6 ”就 业 面试 技巧 与 解析 


17.6.1 面试 技巧 与 解析 (一 ) 


面试 官 : 在 jQuery Mobile 移动 应 用 开发 中 , 有 许多 优秀 的 插件 可 供 选 择 , 请 问 你 知道 哪些 优秀 的 插件 ? 


应 聘 者 : 的 确 ，jQuery Mobile 中 优秀 的 插件 很 多 ， 从 日 期 /时 间 选 择 、 抽 











居 式 导航 菜单 、 手 风琴 导航 、 


隐藏 /显示 密码 , 到 灯箱 特效 、 交 互 式 地 图 、 页 面 震 动 、 相册 /画廊 展示 等 。 自己 用 到 过 的 不 是 很 多 ,有 Camera 
插件 ， 用 于 实现 图 片 的 焦点 轮 播 效果 ;有 Swipebox 插件 ， 用 于 实现 灯箱 效果 ;， 有 mmenu 插件 ， 用 于 实现 
侧 边栏 效果 ， 有 DateBox 插件 和 Mobiscroll 插件 ， 用 于 实现 日 期 和 时 间 的 选择 。 











17.6.2 面试 技巧 与 解析 (二 ) 





面试 官 : 请 问 你 在 使 用 某 一 个 jQuery Mobile 插件 时 ， 遇 到 了 哪些 问题 ? 是 怎么 解决 的 ? 

应 聘 者 : 我 在 使 用 Camera 插件 实现 焦点 轮 播 效果 时 遇 到 了 麻烦 ， 代 码 编写 完成 后 ， 效 果 始 终 出 不 来 ， 
甚至 连 图 片 都 不 显示 ， 我 检查 了 很 多 遍 代 码 确 认 无 误 后 ， 就 在 浏览 器 中 搜索 了 一 下 ， 在 一 些 著名 的 论坛 上 
找到 了 答案 。 使 用 Camera 插件 ，jQuery 文件 版 本 不 能 超过 jQuery-1.9.0， 于 是 我 下 载 了 一 个 jQuery-1.8.3 























的 版 本 ， 把 该 文件 载 入 页 面 后 运行 ， 实 现 了 焦点 轮 播 的 效果 。 
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项 目 实践 


在 本 篇 中 ， 将 贯通 前 面 所 学 的 各 项 知识 和 技能 进行 移动 端的 项 目 实战 开发 。 通 过 本 篇 的 学 习 ， 读 者 将 
学 到 项 目 实战 的 一 些 技巧 ， 并 为 以 后 进行 软件 开发 积累 经 验 。 


第 18 章 HTML 5 在 游戏 开发 行业 中 的 应 用 
第 19 章 HTML 5 在 教育 开发 行业 中 的 应 用 
第 20 章 手机 端 案例 一 一 记事 本 App 

第 21 章 人 脸 识 别 案例 一 一 年 龄 小 侦探 App 





第 18 章 
HTML 5 在 游戏 开发 行业 中 的 应 用 


~ 


六 学 习 指引 


HTML 5 是 新 一 代 的 Web 标准 ， 它 具有 很 多 新 特性 ， 最 主要 的 是 它 具 有 平台 化 的 兼容 性 ， 不 仅 可 以 在 
计算 机 上 运行 ， 还 可 以 在 移动 端 运行 。 不 仅 如 此 ，HTML 5 中 的 canvas 元 素 可 以 使 浏览 器 直接 创建 并 处 理 
图 像 ， 减 轻 了 开发 人 员 的 负担 ， 而 且 使 界面 更 加 优美 ， 从 而 提高 了 用 户 体验 。 

当前 , HTML 5 做 的 网 站 已 不 容 忽视 ,不 论 动画 细节 还 是 运行 效率 都 很 棒 。 本 章 利用 HTML 5 的 canvas 
元 素 制 作 一 款 移 动 端的 小 游戏 一 一 《 打 地 鼠 》。 


二 重点 导读 


。 掌 握 使 用 HTML 5 中 canvas 元 素 绘制 方 格 。 
.掌握 使 用 CSS 3 动画 实现 地 鼠 出 现 和 消失 的 动画 效果 。 





《 打 地 鼠 》 是 一 款 趣 味 性 的 小 游戏 ， 
游戏 开始 后 ， 地 鼠 会 从 一 个 个 地 洞 中 随 
意 出 现 ， 出 现 的 时 间 有 限 ， 要 在 限定 的 
时 间 内 把 它们 消除 , 每 消除 一 个 加 一 分 。 
若 没 在 限定 的 时 间 内 消除 地 鼠 ， 地 鼠 逃 
生 ， 你 将 失去 一 条 命 ， 每 一 次 游戏 共有 
3 条 命 。 当 有 3 个 地 鼠 逃 生 ， 游 戏 结束 。 

本 章 实现 的 《 打 地 鼠 》 游 戏 很 简单 ， 
只 有 3 个 项 目 文件 ， 文 件 目录 如 图 18-1 
所 示 。 





























18-1 《 打 地 鼠 》 游 戏文 件 目录 
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18.2 ”游戏 功能 的 实现 


《 打 地 鼠 》 游 戏 是 在 Opera Mobile 模拟 器 上 调试 开发 的 ，Opera Mobile 模拟 器 在 本 书 第 12 章 讲 过 ， 这 
里 就 不 再 袭 述 。 而 实现 《 打 地 鼠 》 游 戏 ， 主 要 用 到 了 HTML 5、JavaScript、CSS 3、canvas 等 技术 。 


18.2.1 游戏 基本 的 HTML 5 结构 


首先 创建 ndex html 文件 ， 文 件 结构 代码 如 下 : 
<!DOCTYPE html> 
<html> 
<head lang="en"> 
<meta name="viewport" content="initial-scale=]1l, maximum-scale=1, user-scalable=no"> 
<meta charset="UTF-8"> 
<title>HTML 5 打 地 鼠 </title> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
<h2> 打 地 鼠 游 戏 </h2> © opere Mobie HIC re 30 = 名 其 
<h3> 得 分 :0</h3> 
<h3> 生 命 :3</h3> 
<div></div> 
<canvas id="myCanvas" width="800" height="800"> 生命 3 
</canvas> 
<img id="change" src="rat.png"> 
</body> 
</html> 


其 中 
<div></div>: 是 用 来 放置 地 鼠 的 盒子 。 
<canvas id="myCanvas" width="800" height="800"> 
</canvas>: 设置 canvas 的 宽度 和 高 度 。 













































































在 Opera Mobile 模拟 器 上 运行 的 游戏 结构 界面 效果 别 打 我 
如 图 18-2 所 示 。 、 加 -一 -一 一 
18.2.2 ”游戏 CSS 样式 设计 图 18-2 游戏 结构 界面 
使 用 CSS 样式 美化 HTML。 该 游戏 的 CSS 样式 文件 为 style.css， 具 体 的 CSS 代码 如 下 : 
对 padding:0; 
margin:0; 
bodyt{ 


text-align:center; 
background-color:cornsilk; 
overflow:hidden; 


h21 
font-size:40px; 
margin-top: 40px; 

时 

h3{ 
margin-top:15px; 

} 

imgf{ 
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position:absolute; 
width:33.33%; 
max-width:300px; 
max-height :300px; 
transform: scale (0); 
-webkit-transform:scale (0); 
transition:all.5s ease-out; 
-webkit-transition:al1.5s ease-out;/* 地 和 鼠 出 现 的 动画 */ 
} 
.activef 
transform:scale(1)7 
-Webkit-transform:scale (1); 
} 
canvas,div{ 
position:absolute; 
left:50%; 
width:72%; 
height:auto; 
max-width:400px; 
ee @ Opera Mobile -HTC Evo 3D 二 机 
transform:translate (-50%, 0%); 
-webkit-transform:translate(-50%, 0%) ;/* 居 中 显示 */ 
margin-top:50px; 





div{z-index:1;} 
#change{ 
position:fixed; 
top:200%; 
left:200%; 
transform:scale (0.1); 
-webkit-transform: scale (0.1); 


} 
应 用 设计 好 的 CSS 文件 后 ， 在 Opera Mobile 模拟 器 上 运 
行 的 界面 效果 如 图 18-3 所 示 。 


























HIC Evo 30 992x784 ppl:256 [四 [50% 





浊 和 图 18-3 应 

18.2 3 ”Javascript 编程 图 18-3 应 用 CSS 样式 后 的 界面 效果 
静态 页 面 设计 好 后 ， 就 可 以 编写 JavaScript 脚本 了 ， 具 体 代码 如 下 : 
<script> 


Var canvas=document .getElementById ("myCanvas"); 
Var ctx=canvas.getContext ("2d"); 
ctx.fillstyle="#CDC9C9"; 

Var mesh=37 

Var space=800/mesh; 

Var meshSize=space*0.96; 

ctx.translate (space*0.02, space*0.02); 


var rats=[]; // 放 地 鼠 数 组 

var scores; // 得 分 

var life; // 生 命 

var interval; // 产 生地 鼠 的 间隔 时 间 


Var t,t2; 

window.onload=function(){ 
drawBox (); // 游 戏 中 的 方 格 是 用 canvas 画 的 
initGame () 7 // 初 始 化 游戏 


2 

// 初 始 化 游戏 

function initGame()1{ 
scores=0; // 得 分 
life=3; /13 次 机 会 
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interval=100;// 地 鼠 出 现 的 间隔 时 间 
document .getElementsByTagName ("h3") [0] .innerHTML=" 得 分 :"+scoresy 
document .getElementsByTagName ("h3") [1] .innerHTML=" 剩 余 机 会 :"+life; 
t=setInterval (function () { 

showRats () ; // 产 生地 鼠 的 方法 

maintanceRats () ; // 维 护 地 鼠 的 方法 


}rinterval); 


} 
// 画 方 格 , 每 个 方 格 放 一 个 地 鼠 并 且 隐 藏 


function drawBox(){ 


} 


for (Var i=0;i<mesh;i++){ 
for (var j=0;j<mesh;j++){ 
ctx.fillRect (i*space, j*space, meshSize,meshSize) ;// 画 方 格 
Var img=new Image(); 
img.src="rat.png"; 
img.style.left=i*33.33 + "%"; 
img.style.top=j*0.3333*canvas.clientHeight+"px"; 
// 下 面 两 个 事件 是 为 了 适 配 不 同 的 移动 设备 
img.addEventListener ("mousedown",clicked); 
img.addEventListener('touchstart', touched); 
document .getElementsByTagName ("div") [0] .appendChild (img);// 每 个 方 格 放 地 鼠 


rats.push (img);// 地 鼠 放 入 队列 中 ,用 于 后 面 维护 


} 


function touched() {// 触 摸 中 了 地 鼠 


} 


pass (this); 


function clicked() {// 点 击 中 了 地 鼠 


} 


pass (this); 


function pass (rat){ 


if(rat.className=="active") {// 如 果 地 鼠 显 示 出 来 了 
rat.classList.remove ("active");// 隐 藏 
scores ++;// 加 分 
document .getElementsByTagName ("h3") [0] .innerHTML=" 得 分 :"+scores;// 更 新 显示 分 数 
interval-=interval*0.03>2?interval*0.03:interval*0.015;// 增 加 游戏 的 难度 
|! 


function showRats(){// 产 生地 鼠 的 方法 


if (parseInt (Math.random()*100)%parseInt (((interval/12)>2? (interval/12) :2))==0) {// 产 生 


的 概率 越 来 越 大 


} 


Var number=Math.ceil (Math.random()*8); 
if(rats [number] .className=="") {// 如 果 没 有 出 现 
t2=setTimeout (function() {// 调 用 定时 器 方法 ,让 它 出 现 
rats [number] .classList.add("active"); 
rats [number] .id=interval/4;// 用 id 表示 地 鼠 自动 消失 的 时 间 ,与 游戏 难度 相关 
},500)» 


1 


function maintanceRats() {// 维 护 地 鼠 的 方法 


var activeRats=document .getElementsByClassName ("active");// 获 取 所 有 出 现 的 地 鼠 
for (var i=0;i<activeRats.length;i++) {// 用 id 表 示 剩 余 时 间 
activeRats[i] .id-—; 
if (activeRats[i] .id<0) {// 如 果 到 时 间 了 
activeRats[i] .classList.remove ("active");// 当 前 地 和 鼠 隐 藏 
1ife--;// 掉 血 
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interval *=].08;// 回 退 一 点 游戏 难度 
document .getElementsByTagName ("h3") [1] .innerHTMI" 剩 余 机 会 :"+1ife;// 更 新 血 量 显示 
if (life==0){ 
lose(); 
有 
} 
1 


} B Opera Mobile -HTC Evo 30 = 一 六 
// 如 果 游戏 输 了 ,执行 lose () 方法 所 


function lose(){ 


clearInterval (t) ;// 停 止 计 时 器 , 等待 游戏 重新 开始 





clearTimeout (t2) 打 地 鼠 游 戏 
setTimeout (function () {// 延 时 一 点 a 
alert ("您 输 了 , 共 打 了 "+scores+" 只 地 鼠 "); 和 


for (var i=0;i<rats.length;i++){ 
Frats[i]l.classList.remove ("active"); 
// 全 部 地 鼠 隐 藏 

1 

setTimeout (function(){ 
initGame () ;// 重 新 开始 游戏 

},500);// 延 时 ,等 待 地 鼠 隐 藏 的 动画 效果 结束 


























}，10) 7 
有 
主要 代码 的 意思 , 都 已 在 代码 的 注释 部 分 说 明 。 在 Opera Mobile 。 me 一 
模拟 器 上 运行 的 界面 效果 如 图 18-4 所 示 。 图 18-4 游戏 主 界面 


18.3 ”运行 效果 


游戏 已 经 编写 完成 ， 下 面 我 们 来 运行 一 下 ， 看 效果 如 何 。 

直接 把 index.html 文件 拖 入 Opera Mobile 模拟 器 中 ， 游 戏 直接 就 开始 了 ， 如 图 18-5 所 示 。 这 时 只 需要 
用 鼠标 点 击 出现 的 地 鼠 ， 消 除 它们 ， 每 消除 一 只 地 鼠 加 一 分 ， 如 图 18-6 所 示 。 随 着 消除 地 鼠 的 增加 ， 地 鼠 
现 的 间隔 时 间 越 来 越 短 ， 游 戏 难度 增加 ， 游 戏 得 分 就 各 赁 本 事 了 。 当 3 次 机 会 都 使 用 完 后 ， 会 弹出 消除 
的 地 鼠 数 量 ， 如 图 18-7 所 示 。 









































Ee 
二 


























localhost 


























lt i 生 认 
a 
4. zi 加 ER 
|mceean ET jc ep nz Pre 2%5 因 0% rc ee 0 oott22 ppr2s6 [| 50% > 
图 18-5 ”游戏 开始 图 18-6 游戏 进行 中 图 18-7 游戏 结束 
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第 19 章 
HTML 5 在 教育 开发 行业 中 的 应 用 


~ 


WP 学习 指引 


随 着 移动 互联 网 的 不 断 发 展 , 人 们 的 上 网 习惯 已 经 由 PC 段 转向 了 移动 端 ， 所 以 各 互联 网 企业 都 开始 开 
发 基于 移动 端 设备 的 应 用 程序 了 。 本 节 将 要 介绍 一 个 教育 培训 的 移动 端 项 目 一 一 美丽 教育 的 开发 过 程 。 


。 掌 握 移动 端 <meta> 标 签 的 设置 。 
。 掌 握 <a hre 伟 "javascript:history.backO"></a> 的 用 法 。 


19.1 项 目 概述 


美丽 教育 项 目 非常 简单 ， 是 通过 HTML 5+CSS 3 来 实现 的 ， 它 是 一 个 教育 培训 的 项 目 ， 包 括 5 个 页 面 ， 
分 别 是 首页 、 关 于 贾 美丽 、 招 生 要 求 、 教 育 理念 和 联系 我 们 ， 如 图 19-1 所 示 。 





























图 19-1 美丽 教育 文件 目录 


a 
HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 
NA 


19.2 ”美丽 教育 页 面 的 实现 
是 使 用 Web 前 端 基础 知识 HTML+CSS 实现 的 ， 实 现 过 程 具体 如 下 。 


首页 
该 页 面 起 到 导航 的 作用 ， 可 以 通过 它 连接 到 其 他 页 面 。 实 现 页 面 的 代码 如 下 ; 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title> 首 页 </title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 
maximum-scale=1.0, user-scalable=no"> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="main"> 
<img src="images/011.png" height="180" width="320"/> 
<div class="content"> 
<table> 
<tr> 
<td valign="top" width="14%"><img src="images/1-icon.jpg"/></td> 
<td><span> 美 丽 教育 网 络 科技 有 限 公司 </span></td> 
</tr> 
<tr> 
<td valign="top" width="14%"><img src="images/1-icon.jpg"/></td> 
<td><span class="style27"> 老 师 电话 :13366668888</span></td> 
</tr> 
</table> 
<h3></h3> 
<h3></h3> 


将 
四 



































<hr> 
<table> 
<tr> 
<td><a href=" 关 于 机 美丽 .html" target="_self"><img src="images/02.png" alt="error" 


/></a></td> 
</tr> 
<tr> 
<td><a href=" 招 生 要 求 .html" target=" self"><img src="images/03.png" alt="error" 


/></a></td> 
</tr> 
<tr> 
<td><a href=" 教 育 理念 .html" target=" self"><img src="images/04.png" alt="error" 
/></a></td> 
</tr> 
<tr> 
<td><a href=" 联 系 我 们 .html" target="_self"><img src="images/05.png" alt="error" 
/></a></td> 
</tr> 
</table> 
<hr /> 
总 公司 :美丽 
</div> 
<div id="footer">Copyright @ 2018 村 美丽 </div> 
</div> 
</body> 
</html> 





中 部 区 88 栋 102 室 
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二 














写 。 代 码 如 下 : 


的 CSS 代码 是 整个 项 目的 所 有 页 面 都 要 引用 的 CSS 文件 , 在 后 面 的 页 面 中 将 不 





























St 

margin:0; 

padding:0; 

} 

body{ 

font-size:110%; 

color:#272727; 

line-height:1.5em; 
background-color:#f7f7f7; 
text-align:left; 

} 

p, ul,li{text-align:justify;text-justify:inter-ideograph;} 
a{text-decoration:none;color:#CC0000;} 
a:active {text-decoration:none; } 
h2{ 

padding-left:10px; 
font-size:100%; 

font-weight:bold; 
border-bottom-width:3px; 
border-bottom-style:solid; 
border-bottom-color:#990000; 

} 


h31{ 

font-size:100%; 
color:#E5007F; 
margin:10px 07 

L 

#main{ 

width:320px; 
margin-right:auto; 
margin-left:auto; 
background-color:#FFFFFF; 
border:1lpx solid #FFCCCC;» 
} 

.Content{ padding:10px;} 
.Page{ text-align:right;} NT 
.page a{ padding-left:5px;} Y py 美丽 教育 网 络 科技 有 限 公司 


/* Main Content */ 2 老师 电话 :13366668888 
.space{clear:both;} 

/* Footer */ 

#footert{ 

font-size:80%; 会 招生 亚 求 


padding:10px 0; 
color:#999; 美丽 教育 网 络 科技 有 限 公司 

clear:both; 老师 电话 :13366668888 
text-align:center; 


border-top-width:1px; EN 


border-“bottom-width:20px; sp 太公 司 ; 美丽 加 中 部 区 858 栋 107 宣 
border-top-style:solid; 会 招生 要 > 


border-bottom-style:solid; ' 
border-top-color:#ebebeb; 

border-bottom-color:#E5007F; 
. 





区 可 2 如 器 加 一 
和 ee 


果 如 图 19-2 所 示 。 





19.2.2 ”关于 机 美丽 


该 页 面 是 讲述 机 美丽 的 











面 代码 如 
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<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title> 关 于 美丽 </title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="user-scalable=no,width=320" /> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="main"> 
<img src="images/012.png"/> 
<div class="content"> 
<h2><img src="images/2-icon.jpg"/><a href=" 首 页 .html" target=" self"> 首 页 </a>>> 关 于 机 美丽 </h2> 
<h3><img src="images/01.png" width="280" height="50" /></h3> 
<table> 
<tr> 
<td valign="top"><img src="images/1-icon.jpg"/></td> 
<td> 中 国 北京 人 </td> 
</tr> 
<tr> 
<td valign="top" width="11%"><img src="images/1-icon.jpg"/></td> 
<td> 大 学 学 的 计算 机 专业 </td> 
</tr> 
<tr> 
<td valign="top"><img src="images/1-icon.jpg"/></td> 
<td> 大 学 就 考 过 了 计算 机 四 级 </td> 
</tr> 
<tr> 
<td valign="top"><img src="images/1-icon.jpg"/></td> 
<tqd>2015 年 1 月 创立 美丽 网 络 科技 有 限 公司 , 专 注 于 教育 计算 机 人 才 </td> 
</tr> 
<tr> 
<td valign="top"><img src="images/1-icon.jpg"/></td> 
<td>2016 年 5 月 回 母校 演讲 ,并 担任 计算 机 课程 的 教学 </td> 
</tr> 
<tr> 
<td valign="top"><img src="images/1-icon.jpg"/></td> 
<td>2018 年 美丽 网 络 科 技 有 限 公司 规模 已 经 是 全 市 第 一 </td > 


</tr> 
</table> ee 
<div class="page"><a [rienocainosvcanii | Ge 
href="javascript:history.back()"><img wm 一 
src="images/button-icon.gif" align="absmiddle" /> ph 
回 上 页 </a></div> re 专 
7 学 学 的 计算 机 专业 
大 学 就 考 过 了 计算 机 四 级 
总 公司 :美丽 园 中 部 区 88 栋 102 室 2015 年 1 月 创立 美丽 网 络 科技 有 
</div> 首页 > > 关于 责 美 国 限 公司 ， 专 注 于 教育 计算 机 人 才 
<div id-"footer">Copyright © 2018 页 美丽 </div> 一 人 
ee 计算 机 课程 的 教学 
2018 年 美丽 网 络 科技 有 限 公司 规 
</body> 中 国 北京 人 模 已 经 是 全 市 第 一 
</html> 大 学 学 的 计算 机 专业 2 入 上 上 部 


部 区 88 栋 102 室 





在 Opera Mobile 模拟 器 上 运行 的 界面 效果 如 图 pp 


2015 年 1 月 创立 美丽 网 络 科技 有 
19-3 所 示 。 限 公司 ， 教育 计算 机 人 才 
a 号 加 


19.2.3 招生 要 求 


ba 已 加 一 





图 19-3 “关于 贾 美丽 ”页 面 效果 

















该 页 面 ， 展示 招收 学 生 的 要 求 内 容 , 代码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 














366 


第 国 章 HTML 5 在 教育 开发 行业 中 的 应 用 


<head> 
<title> 报 名 条 件 </title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="user-scalable=no,width=320" /> 
<link href="css/style.css" rel="stylesheet"” type="text/css" /> 
</head> 
<body> 
<diV id="main"> 
<img src="images/012.png"/> 
<div class="content"> 
<h2><img src="images/2-icon.jpg"/><a href=" 首 页 .html" target="” self"> 首 页 </a>>> 招 生 要 求 </h2> 
<table> 
<tr> 
<td width="11%" valign="top"><img src="images/1-icon.jpg" /></td> 
<td> 具 有 中 华人 民 共 和 国 国籍 .</td> 
</tr> 
<tr> 
<td width="11%" valign="top"><img src="images/1-icon.jpg"/></td> 
<td>18 周岁 以 上 、35 周岁 以 下 ,应届 毕 业 硕 士 研究 生 和 博士 研究 生 ( 非 在 职 ) 年 龄 可 放宽 到 40 周岁 以 下 .</td> 
</tr> 
<tr> 
<td width="11%" valign="top"><img src="images/1-icon.jpg"/></td> 
<td> 拥 护 中 华人 民 共 和 国 宪法 .</td> 
</tr> 
<tr> 
<td width="11%" valign="top"><img src="images/1-icon.jpg"/></td> 
<td> 具 有 正常 履行 职责 的 身体 条 件 .</td> 
</tr> 
<tr> 
<td width="]11%" valign="top"><img src="images/1-icon.jpg" /></td> 
<td> 具 有 大 专 以 上 文化 程度 .</td> 
</tr> 
<tr> 
<td width="11%" valign="top"><img src="images/1-icon.jpg" /></td> 
<td> 大 学 所 学 专业 与 计算 机 有 关 .</td> 
</tr> 
</table> 
<div class="page"><a href="javascript:history.back()"> 
<img src="images/button-icon.gif"/> 回 上 页 </a></div> 





























<hr /> 
总 公司 :美丽 园 中 部 区 88 标 102 室 
</div> 
<div id="footer">Copyright @ 2018 枫 美 
丽 </div> 
</div> da 2 车 首 页 > > 招生 要 求 
</body> bil Co Las 具有 中 华人 民 共和 国 国籍 。 
</html> 2 18 周 岁 以 上 、35 周 岁 以 下 ,应届 
> pr 毕业 硕士 研究 和 和 博士 研究 生 
在 Opera Mobile 模拟 器 上 运行 的 界面 效果 如 -| ( 非 在 职 ) 年 岭 可 放宽 到 40 周 岁 
er 以 下 , 
加 
19-4 所 示 。 计生 于 二 拥护 中 华人 民 共和 国 完 法 。 
1924 学 卫 仿 18 周 岁 以 上 、35 周 岁 以 下 ,应 届 es 
毕业 硕士 研究 生 和 博士 研究 生 We 
-一 教学 理念 ( 非 在 职 ) 年 擒 可 放宽 到 40 周 岁 大 学 所 学 专业 与 计算 机 有 关 。 
以 下 。 < 
该 页 面 主要 是 介绍 美丽 教育 网 络 科技 有 限 公 捐 护 中 华人 民 共 和 国 守 法 ， 生生 和 信和 
re 具有 正常 县 行 职责 的 身体 条 件 。 
司 的 教学 理念 ， 代 码 如 下 : 具有 大 专 以 上 文化 程度 。 
<!DOCTYPE html> Pa 本 口 国 - 


<html lang="en"> CR = 
<head> LG Op 480x80 Ppl: 21€ ea 50% LG Opti 480x80! PPE 21¢ [D3) |50% 7 


<title> 教 育 模式 </title> 19.4 “招生 要 求 ”页 面 效果 
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<meta charset="UTF-8"> 
<meta name="viewport" content="user-scalable=no,width=320" /> 
<link href="css/style.css" rel="stylesheet" type="tezxt/css"” /> 
</head> 
<body> 
<div id="main"> 
<img src="images/012.png"/> 
<div class="content"> 
<h2><img src="images/2-icon.jpg"/><a href=" 首 页 .html" target="” self"> 首 页 </a>>> 教 育 理念 </h2> 
<p><strong> (1) 随 到 随 学 </strong> </p> 
<table> 
EP 
<td valign="top"><img src="images/1-icon.jpg"/></td> 
<td width="87$%"” valign="top"> 学 员 报名 之 后 立马 就 可 以 开始 学 习 ， 无 须 等 人 数 够 了 再 开 班 ， 每 个 学 
员 都 可 以 根据 自己 的 时 间 安 排 制订 自己 的 学 习 计划 ， 不 会 再 因为 时 间 不 统一 落下 课 。 </td> 
</tr> 
</table> 
<p><strong> (2) 4 对 1 辅导 </strong></p> 
<table> 
<tr> 
<td valign="top"><img src="images/1-icon.jpg"/></td> 
<td width="87%" valign="top"> 
授课 老师 、 助 教 老师 、 班 主任 、 就 业 指导 老师 4 对 1 的 服务 模式 ,学 员 可 以 实时 在 线 与 授课 老师 和 助教 
老师 1 对 1 沟通 问题 ,就 业 指导 老师 会 在 就 业 前 对 学 员 进 行 1 对 1 就 业 指导 保证 学 员 进 名 企 拿 高 薪 . 
</td> 
</tr> 
</table> 
<br /> 
<p><strong> (3) 疗 关 式 学 习 </strong></p> 
<table> 
<tr> 
<td valign="top"><img src="images/1-icon.jpg"/></td> 
<td width="87%" valign="top"> 
我 们 的 课程 是 闻 关 式 教学 ,学员 需要 完成 每 一 关 的 作业 测试 及 与 助教 的 视频 考核 ,考核 合格 之 后 才能 进入 
到 下 一 阶段 的 学 习 , 通 过 作业 测试 视频 考核 也 可 以 检验 学 员 的 学 习 效果 ,让 学 员 知道 自己 的 学 习 程度 和 效果 
</td> 
CEL 
</table> 
<p><strong> ( 4 ) 名 企 就 业 推荐 </strong></P> 
<table> 
<tr> 
<td valign="top"><img src="images/1-icon.jpg"/></td> 
<td width="87%" valign="top"> 
我 们 已 经 和 超过 5000 家 企业 建立 人 才 推 荐 合作 ,遍及 全 国 40 多 个 城市 ,参加 我 们 微 职位 培训 的 学 员 都 
可 以 获得 免费 推荐 就 业 的 机 会 ,我 们 课程 的 宗旨 就 是 系统 学 习 IT 技术 , 进 名 企 拿 高 薪 , 为 你 的 职场 晋升 助力 
</td> 
</tr> 
</table> 
<div class="page"> 
<a href="javascript:history.back()"><img src="images/button-icon.gif"/> 回 上 页 </a> 
</div> 
<hr /> 
总 公司 :美丽 园 中 部 区 88 株 102 室 
</div> 
<div id="footer">Copyright @ 2018 页 美丽 </div> 
</div> 
</body> 
</html> 
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在 Opera Mobile 模拟 器 上 运行 的 界面 效果 如 图 19-5 所 示 。 











每 个 学 员 帮 可 以 私 据 自己 的 时 间 进去 到 下 一 个 阶段 的 学 习 ,通过 
安排 制定 自己 的 学 习 计 划 , 不 会 作业 测试 视频 者 核 也 可 以 检验 学 
再 区 为 时 间 不 统一 落下 课 - 员 的 学 习 效 果 , 让 学员 知道 自己 
(2) 4 对 1 辅导 的 池 习 程度 和 效果 。 
授 主 老 师 、 助 教 者 师 、 珀 主任 、 (4) 名 企 就 业 推荐 
就 业 指导 老师 4 对 1 的 服务 模式 ， 我 们 已 经 和 超过 5000 家 企业 建 
学 员 可 以 实时 在 线 与 授课 老师 立 人 才 推 荐 合作 ， 亿 及 全 国 40 多 
首页 > > 教育 理 信 ee baer 个 城市 ， 参 加 我 们 微 职位 培训 的 
TD 有一 业 指 导 老 师 会 在 就 业 前 对 学 员 进 学 员 都 可 以 获得 免费 推荐 就 业 的 
(CD 行 1 
1 对 1 就 业 指 导 保证 学 员 进 名 企 机 会 ， 我 们 的 课程 的 宗旨 就 是 系 
学 员 报 各 之 后 立马 就 可 以 开始 学 edd a 
ee i 统 学 习 IT 技 术 ， 进 各 企 介 高 新， 


可 以 的 时 间 为 你 的 职场 晋升 助力 。 
每 个 学 员 都 可 以 根据 自己 的 时 间 (3) 阅 关 式 学 习 


安排 制定 自己 的 学 习 计划 ,不 会 ry 人 
再 因为 时 间 不 统一 落下 课 - br ee 全美 丽 丰 部 区 86 术 102 室 
2) 4 对 1 辅导 需要 完成 每 一 关 的 作业 测试 及 与 
《 助教 的 视频 考核 , 合格 之 后 才能 a 
授课 老师 、 助 教 老 师 、 班 主任 、 进去 到 下 一 个 阶段 的 学 习 ,通过 


和 浦口 硬 - PR 让 司 硬 - 


tm on mn 
图 19-5 “教学 理念 ”页 面 效 果 


| 习 启 等 人 玫 够 了 动 教 的 视频 考核 合格 之 后 才能 | 


# 回 上 页 





19.2.5 ”联系 我 们 
该 页 面 介 绍 了 公司 的 联系 方式 ， 以 及 总 公司 和 分 公司 的 地 理 位 置 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title> 联 系 我 们 </title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="user-scalable=no,width=320" /> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="main"> 
mages/012.png" width="320" height="131"/> 
"content"> 
<h2><img src="images/2-icon.jpg"/><a href=" 首 页 .html" target="” self"> 首 页 </a>> > 联系 我 们 </h2> 
<h3><span> 总 公司 </span> 
<br /> 
电话 :0011-2001020 <br /> 
传真 :6666666 <br /> 


地 址 :美丽 园 中 部 地 区 88 栋 102 室 
</h3> 
<h3><span class="style28"> 分 公司 </span><br /> 
电话 :0012-2001000<br /> 
传真 :8888888<br /> 
地 址 :美丽 园 北 区 10 株 501 室 
<br /> 
</h3> 
<div class="page"><a href="javascript:history.back()"><img src="images/button-icon.gif™" 
/> 回 上 页 </a></div> 
</div> 
<div id="footer">Copyright @ 2018 贾 美 丽 </div> 
</div> 
</body> 
</html> 
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在 Opera Mobile 模拟 器 上 运行 的 界面 效果 如 






传真; 8888888 
地 址 ; 美丽 因 北 区 10 栋 501 宣 
* 回 上 页 


地 址 : 网 丽 园 北 区 10 棒 501 室 


图 19-6 “联系 我 们 ”页 面 效果 


19.3 项目 运行 效果 


关于 这 个 项 目 ， 很 简单 ， 下 面 就 来 运行 一 下 。 

我 们 以 首页 和 联系 方式 页 面 进行 演示 ， 先 在 Opera Mobile 模拟 器 上 打开 首页 页 面 ， 单 击 “ 联 系 我 们 ” 
按钮 ， 如 图 19-7 所 示 ， 页 面 将 跳 转 到 “联系 我 们 ”页 面 ， 在 该 页 面 中 可 以 通过 单 击 首页 跳 转 到 首页 面 ， 也 
可 以 单 击 下 方 的 “ 回 上 页 ”按钮 ， 跳 转 到 上 一 条 浏览 记录 的 内 容 。 











地 址 : 美丽 图 北 区 10 栋 501 室 
跳 转 到 上 一 页 一 人 >” 





ms 
19-7 项目 运行 效果 
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第 20 章 
手机 端 案例 一 一 记事 本 App 


~ 


< 学习 指 引 


随 着 移动 App 应 用 爆发 式 增长 ， 人 们 对 它们 可 以 说 是 既 熟 悉 双 陌生。 熟悉 的 是 App 应 用 之 多 、 操 作 之 
便捷 ， 陌 生 的 是 移动 App 看 似 简单 实用 却 不 知 从 何 入 手 。 下 面 我 们 通过 本 章 记事 本 App 一 起 熟悉 移动 App 
的 神秘 面纱 。 该 案例 是 类 似 手机 备忘录 功能 的 记事 本 应 用 App， 是 一 个 基于 HTML 5+CSS 3+jQuery 实现 的 
移动 端 App， 支 持 Android 和 iOS 系统 。 下 面 我 们 将 从 基础 和 实用 的 角度 通过 基本 功能 梳理 、 开 发 环境 准 
备 、 项 目 实战 的 三 步 走 方针 展开 论述 ， 力 求 每 一 位 学 习 者 对 简单 的 App 的 实现 可 以 化 陌生 为 熟悉 ， 积 累 一 
定 的 经 验 ， 掌 握 必 要 的 实战 能 力 ! 


ne 分 重点 导读 


。 掌 握 使 用 HTML 5+CSS 3+JavaScript 设计 。 
。 掌 握 HBuilder 的 安装 与 环境 配置 。 

。 熟 悉 Nativejs。 

。 掌 握 HBuilder 实现 优化 菜单 。 

。 掌 握 App 打包 的 方法 。 


20.1 项 目 概述 


20.1.1 功能 梳理 


剖 

本 章 我 们 要 介绍 的 是 记事 本 的 应 用 App 的 制作 , 功能 是 要 实现 记录 功能 , 也 就 是 要 实现 可 以 增加 记录 、 
查看 记录 、 删 除 记录 等 基本 业务 功能 。 相 信 这 些 功 能 ， 我 们 在 Java 层 可 以 信 手 牛 来 。 那么， 在 移动 端 如 何 
实现 简化 、 美 化 呢 ? 让 我 们 一 起 看 一 下 “记事 本 App” 是 怎样 完美 呈现 的 。 
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1. 功能 层 
右上 角 添 加 事件 : 打开 应 用 ， 在 首页 右上 角 有 添加 按钮 ， 单 击 按钮 可 以 添加 事件 。 
单 击 事项 查看 详情 : 在 事项 列表 页 面 ， 进 行 网 格 展示 所 有 的 事项 ， 单 击 事项 可 以 查看 详情 。 
常 按 事项 删除 :在 事项 列表 页 ， 常 按 事项 可 以 进行 删除 。 
右 滑 事项 完成 : 在 事项 列表 页 ， 右 滑 事项 可 以 进行 事项 完成 操作 。 
左 滑 显 示 完 成 事项 : 在 应 用 页 面 ， 左 滑 显示 完成 事项 ， 单 击 事项 列表 页 返回 。 


2. 页 面 层 
1) 添加 页 -> 添加 待 办 事项 ， 具 体 功能 如 下 : 
。 单 击 待 办 事项 列表 右上 角 进 入 ; 

。 填写 信息 添加 待 办 事项 。 

2) 完成 页 -> 右 侧 菜单 ， 显 示 已 完成 待 办 事项 ， 具 体 功能 如 下 : 
。 右 滑 待 办 事项 列表 可 弹出 ，; 

。 单 击 右 上 角 可 弹出 ; 

。 所 有 页 都 有 退出 和 菜单 按钮 。 



























日 
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本 项 目 开发 环境 为 HBuilder。 用 HBuilder 做 开发 ， 其 实 可 以 说 是 最 简单 的 一 种 环境 搭建 了 ， 甚 至 可 以 
说 没有 环境 需要 搭建 。 但 在 Android 环境 下 开发 的 时 候 , 则 相当 痛苦 , 如 要 下 载 各 种 sdk, 而 且 都 需要 翻 墙 ， 
苦 不 堪 言 。 用 HBuilder 做 开发 , 只 需要 基础 的 Java 环境 , 其 余 的 Android 和 iOS 环境 统统 不 需要 。HBuilder 
可 以 做 到 这 一 点 ， 是 因为 : 

。 将 打包 放 到 云端 ， 免 去 了 本 地 搭建 环境 进行 打包 的 痛苦 。 

。 将 调试 直接 设置 为 真 机 调试， 免 去 了 各 种 模拟 器 调试 的 痛苦 。 


1. JDK1.8 

利用 HBuilder 开发 只 需要 基础 的 Java 环境 ,也 就 是 CMD 下 可 以 运行 Java 和 Javac 即 可 。JDK 是 Java 
语言 的 软件 开发 工具 包 ， 主 要 用 于 移动 设备 、 贱 入 式 设备 上 的 Java 应 用 程序 。JDK 是 整个 Java 开发 的 
核心 ， 它 包含 了 Java 的 运行 环境 (JVM+Java 系统 类 库 ) 和 Java 工具 。 此 处 所 用 JDK 版 本 为 1.8。 注 意 : 
JDK 安装 完 需 配置 环境 变量 。 相 关 链 接 为 https://www.lvtao.net/server/windows-setup-tomcat.html， 本 书 第 一 
章 中 也 有 介绍 ， 可 供 参 考 。 


2. HBuilder 

HBuilder 前 面 已 做 了 简要 的 介绍 ， 这 里 主要 讲述 安装 和 简单 的 使 用 。 首 先 去 官网 下 载 免费 的 HBuilder 
工具 。 下 载 完成 后 将 ZIP 包 解 压缩 到 自 定义 的 目录 下 ， 双 击 该 目录 下 的 HBuilder.exe 即 可 打开 HBuilder。 
第 一 次 打开 HBuilder 需要 注册 ， 几 分 钟 即 可 搞定 。 

登录 后 即 可 看 到 HBuilder 主 界面 ， 如 图 20-1 所 示 。 

HBuilder 就 是 基于 eclipse 做 的 二 次 开发 ide, 使 用 过 eclipse 或 者 myeclipse 的 开发 人 员 应 该 很 熟悉 这 个 
界面 ， 所 以 大 部 门 eclipse 的 操作 ， 快 捷 键 都 可 以 直接 挪 过 来 使 

。 前 端 开发 : 各 种 快捷 键 ， 各 种 提示 ， 最 好 的 一 点 是 是 对 所 有 HTML、CSS、JavaScript 的 各 浏览 器 兼容 

性 都 有 提示 。 



































372 


第 团 章 手机 端 案 例 一 -记事 本 App 


























图 20-1 HBuilder 主 界面 


。 Web 开发 : 脱胎 自 eclipse， 因 此 做 Java Web 开发 不 成 问题 。 
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。 App 开发 : 这 个 是 重点 ， 无 论 是 编辑 、 在 线 打 包 ， 还 是 真 机 调试 ， 均 快速 高 效 。 


3. 项 目 配置 


首先 来 学 习 如 何 新 建 一 个 App 项 目 。 通 过 HBuilder 创建 一 个 App 项 目 , 是 个 十 分 简单 的 过 程 ， 相 信 大 
家 看 过 前 面 的 HBuilder 相关 文章 ， 都 已 经 小 试 牛刀 了 。 此 处 就 是 利用 HBuilder Mui 模板 进行 开发 的 ， 如 图 


20-2 所 示 。 











呵 中 9 


关上 














ml 











上 E33 











20-2 ”manifestjson 文件 配置 


其 中 项 目 初始 化 关键 的 就 是 对 manifestjson 文件 的 处 理 ， 基 本 上 App 所 有 的 功能 调用 、 配 置 都 可 以 在 





此 进行 设置 ， 方便 快捷 ， 如 图 20-2 所 示 。 相 信 大 家 看 过 学 习 案例 之 后 对 这 部 分 已 经 有 了 一 定 的 了 解 ， 下 而 
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再 次 进行 介绍 ， 以 便 大 家 以 后 可 以 手 到 擒 来 。 

1) 应 用 信息 。 

(1) 填写 应 用 名 称 : 也 就 是 之 后 显示 在 手机 上 的 App 名 称 。 

(2) 版 本 号 : 因为 开发 的 时 候 会 频繁 修改 打包 ， 所 以 建议 大 家 用 版 本 号 做 区 分 ， 例 如 使 用 1.1.1. 
2017070701， 代 表 大 、 中 、 小 日 期 。 

(3) 页 面 入 口 : App 启动 后 的 入 口 页 面 ， 一 般 默认 使 用 或 修改 index.html， 这 个 很 重要 ， 之 后 会 详细 讲解 。 

(4) 重力 感应 ， 有 4 种 模式 ， 一 般 只 需要 选择 第 一 种 即 可 ， 也 就 是 正常 屏幕 ， 有 其 他 需要 再 依次 选择 。 

2) 图 标定 制 。 

如 果 不 定制 图 标的 话 ， 默 认 是 HBuilder 的 图 标 ， 你 肯定 不 想 自己 的 App 如 此 没有 代表 性 和 标识 性 ， 在 
图 标 配置 处 选择 一 个 制作 好 的 256 X256 大 小 的 PNG 格式 的 图 片 ， 系 统 会 自动 生成 各 种 大 小 的 图 标 ， 希 望 
自己 制作 的 图 标 可 以 引 人 注 目 ， 让 人 情不自禁 地 去 使 用 。 

3) 启动 图 片 (splash) 配置 。 

单 击 App 成 功 加 载 和 进入 页 面 入 口 之 前 的 过 渡 图 片 即 可 启动 图 片 ， 可 以 根据 不 同类 型 的 手机 配置 不 同 
类 型 的 图 片 。 

4) SDK 配置 。 

SDK 配置 也 就 是 引用 三 方 插件 的 配置 ， 大 部 分 都 是 需要 输入 自己 的 ak 和 sk， 比 较 常用 的 是 登录 、 支 
付 、 推 送 、 分 享 、 地 图 等 。 具 体 的 使 用 方法 可 参考 第 三 方 的 SDK。 

5) 模块 权限 配置 。 

模块 权限 配置 就 是 调用 原生 功能 项 的 配置 ， 选 中 相应 的 模块 可 以 进行 对 应 的 功能 调用 。 现 有 功能 模块 
基本 可 以 满足 开发 的 需求 。 为 了 给 用 户 一 个 更 好 的 体验 ， 需 要 将 不 需要 的 权限 删 掉 ， 只 保留 必须 的 权限 。 
此 处 我 们 选择 的 功能 模块 为 : 设备 信 、Nativejs、 窗 口 管理 、 原 生 UI 控件 、 浏 览 器 信息 、 原 生 对 象 、 本 地 
存储 、 运 行 环 境 等 。 

6) 代码 视图 。 

此 案例 中 只 有 一 个 主要 的 展示 和 操作 页 面 就 是 index.html, 所 有 的 效果 都 是 通过 原生 自 带 和 自己 手动 编 
写 的 简单 CSS 3 展示 效果 ， 所 有 的 功能 实现 都 是 通过 调用 原生 的 Mui 和 JavaScript 控制 实现 的 (主要 的 调 
用 为 index.js 和 qiao.js)。 


4. 数据 存储 的 实现 

HBuilder 开发 的 App， 数 据 存储 有 以 下 几 种 方式 : 

(1) 线 上 数据 库 : 与 传统 App 一 样 ， 可 以 将 数据 存储 到 线 上 数据 库 。HBuilder 的 App 可 以 通过 Mui 
封装 的 ajax0 方 法 操作 数据 库 。 

(2) Web 存储 : 利用 HTML 5 的 新 特性 , sessionStorage 较 弱 , localStorage 较 强 , localstorage 结合 storejs 
可 以 存储 json 对 象 。 

(3) webSQL: 第 二 种 方式 虽然 可 取 ， 但 是 还 是 比较 弱 ， 对 于 没有 线 上 数据 库 的 App 来 说 ，webSQL 是 
一 种 较 好 的 方式 ， 就 是 存储 在 本 地 的 数据 库 ， 是 一 种 不 错 的 方式 。 

这 里 我 们 使 用 webSQL， 一 起 了 解 一 下 : 

webSQL 和 大 部 分 SQL 相似 ， 但 是 可 以 直接 通过 HTML 5 操作 ， 也 就 是 说 不 需要 安装 数据 库 ， 只 要 是 
支持 HIML 5 的 浏览 器 都 可 以 使 用 。 但 是 与 成 熟 的 dbms 相 比 , webSQL 还 是 比较 弱 的 , 最 简单 的 一 点 来 说 ， 
不 支持 id 自 增 。 

封装 webSQL 创建 数据 库 ， 更 新 和 查询 操作 ， 代 码 如 下 : 


// web sql 
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由 于 id 不 能 自 增 ， 所 有 每 次 插入 的 时 候 


x (id) mi 


需要 手动 获取 最 大 id 并 加 1， 代 码 如 下 : 


plan < 








20.1.3 ”代码 结构 
使 用 HBuilder 打开 项 目 之 后 ， 整 个 项 目的 代码 结构 如 图 20-3 所 示 。 
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20.2 项 目 解析 


下 面 通过 案例 中 的 主要 功能 项 和 知识 点 进行 案例 解析 。 


首页 



















































































的 首页 通过 上 面 的 配置 可 以 看 到 是 index.html 页 面 。 首 页 是 分 为 index 部 分 ， 也 就 是 可 见 的 头 部 ， 
有 时 候 是 头 部 和 底部 ， 还 有 list 部 分 ， 也 就 是 中 间 部 分 。 这 样 做 是 为 了 让 App 更 加 通 真 。 对 应 的 模式 可 
图 20-4 来 表示 。 
Helo mu 0 Holo mu 0 

badge (数字 角 标 ) badge (数字 角 标 ) 

button ( 按 可 ) uaon ( 控 ) 

checkbox ( 租 选 概 ) checkbox ( 复 选 模 ) 

dlog (消息 要 ) dialog 【消息 概 ) 

gabery sbder (本 片 矣 ) gery shder (用 片 细 ) 

十 | aory ane (mxat guery table {本文 和) 

re (OF) gd (9 让 格 ) 

jcon 《图标 ) icon 《本 标 ) 

input 《输入 星 ) input 〈 输 入 杠 ) 

It (和 tt (WR) 

index.html listhtml 合并 后 的 首页 
图 20-4 首页 
index.html 文件 如 下 : 





<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=],maximum-scale=], 
user-scalable=no"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 





PA 

<link type="text/css" rel="stylesheet" href="../static/css/mui.min.css"/> 
</head> 
<body> 


<header class="mui-bar mui-bar-nav"> 
<a class="mui-icon mui-icon-bars mui-pull-left menua"></a> 
<a class="mui-icon mui-icon-plus mui-pull-right adda"></a> 
<hl class="mui-title"> 记 事 本 </hl> 
</header> 
A 
<script type="text/javascript" src="../static/js/mui.min.js"></script> 
<!=— jquery -> 
<script type="text/javascript" src="../static/js/lib/jquery/jquery-1.11.2.min.js"></script> 
< a hls 
<script type="text/javascript" src="../static/js/lib/qiao/qiao.h.js"></script> 
nD 
<script type="text/javascript" src="../static/js/app/index.js"></script> 
</body> 
</html> 


。 meta: 第 一 个 标签 不 多 说 了 ， 定 义 编码 格式 ， 第 二 个 是 适应 移动 端 用 的 ， 都 是 必 不 可 少 的 。 
。 Mui: Mui 的 JS 和 CSS 文件 是 必须 的 , Mui 负责 App 的 UI 界面 和 App 与 原生 交互 的 封装 , 你 也 可 
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以 采用 bootstrap 或 者 jQuery Mobile 等 UI， 但 是 这 里 还 是 推荐 Mui。 

。 header: 采用 Mui 中 封装 好 的 组 件 “ 导 航 栏 包含 文字 和 图 标 ” 其 中 Mui-pull-left 代表 浮动 到 左边 ， 
right 到 右边 ，Mui-icon-* 代 表 各 种 字体 图 标 ， 关 于 字体 图 标 可 以 看 项 目 中 的 muittf 文件 ， 如 果 Mui 
自 带 的 没 法 满足 ， 你 可 以 在 这 里 http://www.iconfont.cn/ 下 载 引 入 。 

。 JS 引入 : 将 与 页 面 初始 化 无 关 的 JS 引入 到 body 的 最 底部 是 一 个 好 习惯 ， 这 里 引入 了 jQuery 和 我 
自己 的 一 些 封装 qiao.hjs， 以 后 详细 解说 ， 最 后 是 index 页 面 对 应 的 JS 文件 。 


20.2.2 ”列表 页 面 

















































































































上 面 我 们 说 过 ， 首 页 其 实 是 index 和 list 页 面 的 整合 。 下 面 我 们 来 看 一 下 ，list 页 面 是 怎么 加 载 整合 进 
来 的 ， 首 先 看 一 下 入 口 页 面 index 页 面 中 调用 的 JS 文件。 

1. index.js 文件 

// 初始 化 


mui.init({ 
subpages: [qiao.h.normalPage('list')] 
Ds 
Var main=null; 
Var showMenu=false; 
Var menu=null; 
var add=null; 
Var detail=null; 
// 所 有 方法 都 放 到 这 里 
mui.plusReady (function(){ 
setColor ("#f7f7f7") 7 
/1 侧 滑 菜单 
main=qiao.h.indexPage (); 
Var menuoptions=qiao.h.page('menu'’', { 
styles:{ 
left:0, 
width:'70%", 
zindex:-1 
} 
Bx 
menu=mui .preload (menuoptions); 
qiao.on('.mui-icon-bars', 'tap', opMenu); 
main.addEventListener('maskClick', opMenu); 
mui.menu=opMenu; 
// 添加 
add=mui .preload (qiao.h.normalPage('add', {popGesture:'none’'})); 
qiao.on('.adda', 'tap', showAdd); 
qiao.on('.mui-icon-back', 'tap', hideAdd); 
// 详情 
detail=mui .preload (qiao.h.normalPage('detail', {popGesture:'none'})); 
// 退出 
mui.back=function(){ 
if($('.adda') .is(':hidden')){ 
hideAdd (); 
}else if(showMenu){ 
closeMenu(); 
jelsef 
qiao.h.exit (); 
} 
] 7 
]}) 2 
// menu 
function opMenu(){ 
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可 以 看 到 ， 初 始 化 时 就 自动 加 载 list.html 页 面 并 对 首页 中 的 各 种 操作 进行 了 定义 。 其 中 listhtml 也 
与 index.html 页 面 类 似 ， 只 不 过 页 面 中 引用 的 是 listjs， 进 行 数据 的 加 载 和 处 理 。 


2. listjs 文件 





Ds 


keyEventBind:{ 
backbutton:false, 
menubutton:false 





}, 
gestureConfig:{ 

longtap:true 
} 


var tapId=null; 
// 所 有 的 方法 都 放 到 这 里 


mui.plusReady (function (){ 


1D); 


// 获取 列表 

initHelp() > 

// 右 滑 菜 单 

window.addEventListener ('swiperight', function(){ 
qiao.h.indexPage() .evalJS ("opMenu();"); 

3 

// 查看 详情 


qiao.on('#todolist li', '‘'tap', function(){ 
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qiao.h.fire('detail', 'detailItem', {id:$ (this).data('id')}); 


qiao.on('.doneBtn', ‘tap', function(){ 
Var $1i=$ (this) .parent () .parent (); 
Var id=$li.data('id'); 
$1i.remove(); 
showList($('#todolist')); 
qiao.h.fire('menu', 'doneItem', {todoId:id}); 
return false; 
Ds 
// 长 按 
qiao.on('#todolist li', 'longtap', function(){ 
tapId=$ (this) .data('id'); 
qiao.h.pop(); 
Ds; 
// 删除 
qiao.on('.delli', 'tap', delItem); 
// 添加 
window.addEventListener ('addItem', addItemHandler); 


function initHelp(){ 


var help=qiao.h.getItem('help'); 
if (help==nul11){ 


qiao.h.update (db, 'create table if not existst plan day todo (idunique, plan title, plan_ 


content) '); 


qiao.h.update (db, 'create table if not existst plan day done (idunique, plan title, plan_ 


content) '); 


Ep on 


var content='1. 右 上 角 添 加 事项 <br/>2. 单 击 事项 查看 详情 <br/>3. 长 按 事项 删除 <br/>4. 右 滑 事项 完成 
<br/>5. 左 滑 显示 完成 事项 "7 
var sql='insert into t plan day todo (id, plan title, plan content) values (1，" 功 能 介 


+ Content + ) 
qiao.h.update (db, sql); 
qiao.h.insertItem('help', 'notfirst'); 
} 
initList(); 


| 
// 初始 化 待 办 事项 


function initList(){ 


qmask. show (); 
var Sul=$('#todolist') .empty (); 


qiao.h.query(db, 'select + from t plan day todo order by id desc', function(res){ 


for (i=0; i < res.rows.length; i++) { 
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Sul.append(genLi (res.rows.item(i))); 


} 
showList($ul); 
Ds 
qmask.hide(); 
function genLi (data){ 
var id=data.id; 
var title=data.plan title; 
var content=data.plan content; 
Var. 1i= 
"<1i class="mui-table-view-cell" id="todoli ' + id + '" data-id="" + id + '">'+ 
"<div class="mui-slider-right mui-disabled">' + 
'<a class="mui-btn mui-btn-red doneBtn"> 完 成 </a>' + 
SA 二 
"<div class="mui-slider-handle">' + 
"<div class="mui-media-body">' + 
Litle 于 
'<p class="mui-ellipsis">'+content+'</p>' + 
MOV2 下 
1/GAV2 + 
Pe/ Li 
return li; 
} 
function showList (ul){ 
if(ul.find("1i").size() > 0 && ul.is(':hidden')) ul.show(); 


; 
// 添加 待 办 事项 
function addItemHandler (event){ 
// 主 界面 按钮 修改 
qiao.h.indexPage () .evalyJS ("hideBackBtn();"); 
Var title=event.detail.title; 
var content=event .detail.content ? event.detail.content:!' 暂 无 内 容 ! '; 
qiao.h.query(db, 'select max(id) mid from t plan day todo', function(res){ 
var id=(res.rows.item(0) .mid) ? res.rows.item(0) .mid:0; 
qiao.h.update (db, 'insert into t plan day todo (id, plan title, plan content) values ('+ 
仁和 
$('#todolist') .prepend (genLi ({id:id+1l, 'plan title':title, 'plan content' :content})) .show() 7? 
Ds 
2 
// 删除 事项 
function delItem(){ 
if(tapId){ 
qiao.h.update (db, 'delete from t plan day todo where id=' + tapId); 
qiao.h.pop(); 
initList() 7 
} 
} 


通过 上 面 代码 可 以 看 到 ，listjs 中 自动 加 载 执行 initHelp0;。 在 此 方法 中 通过 对 initlist0; 的 执行 ， 对 webSQL 
进行 查询 处 理 ， 以 初始 化 待 办 数据 ， 同 时 通过 不 同 的 操作 跳 转 到 不 同 的 页 面 。 


20.2.3 ”查看 与 删除 


通过 上 面 的 listjs 可 以 看 到 查看 、 操 作 比 较 简单 ， 当 进行 tap 单 击 操作 时 就 会 fire 到 detail 的 页 面 ， 在 
detail 页 面 中 调用 detailjs 方法 ， 自 动 展示 待 办 事项 的 详情 并 展示 detail.html 对 应 的 区 域 中 。 

删除 操作 时 通过 长 按 操作 longtap 进行 触发 确认 框 , 当 单 击 删除 按钮 时 , 将 会 对 此 条 数据 进行 删除 操作 ， 
并 初始 化 列表 页 。 删 除 方法 如 下 : 

// 删除 事项 
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function delItem(){ 
if (tapId){ 
qiao.h.update (db, 'delete from t plan day todo where id=' + tapId); 
qiao.h.pop(); 
initList(); 


} 


20.2.4 添加 事项 


添加 事项 顾名思义 就 是 进行 事件 的 添加 ， 也 就 是 进行 webSQL 的 insert 操作 。 这 里 只 要 实现 在 单 击 添 
加 按钮 时 进入 编辑 页 面 ， 进 行 保存 处 理 ， 退 回 list 页 面 即 可 。 

在 indexjs 中 有 如 下 的 相关 定义 : 

// 添 加 

add=mui .preload (qiao.h.normalPage('add', {popGesture:'none'})); 


qiao.on('.adda', 'tap', showAdd); 
qiao.on('.mui-icon-back', 'tap', hideAdd); 


第 1 行 是 预 加 载 添 加 页 面 ， 这 个 之 前 说 过 了 ，normalPage 只 是 对 style 做 了 封装 。 




















9 























第 2 行 是 监听 左上 角 的 按钮 单 击 事件 。 

第 3 行 是 监听 右上 角 的 后 退 按钮 (进入 添加 页 后 右上 角 变 为 后 退 按钮 )。 
对 应 的 方法 如 下 : 

// showAdd 


function showAdd(){ 
showBackBtn (); 
qiao.h.show('add', 'slide-in-bottom', 300); 
} 
function hideAdd(){ 
hideBackBtn (); 
qiao.h.getPage('add') .hide(); 
qiao.h.getPage('detail') .hide(); 
} 
function showBackBtn(){ 
$('.menua') .removeClass('mui-icon-bars') .addClass('mui-icon-back'); 
$('.adda') .hide(); 
小 
function hideBackBtn()1{ 
$('.menua') .removeClass ('"mui-icon-back') .addClass('mui-icon-bars'); 
$('.adda') .show() 7 
} 


通过 上 面 的 代码 可 以 看 到 ， 操 作 比较 简单 ， 就 是 当 进 入 添加 页 后 将 左上 角 修 改 为 后 退 按钮 ， 右 上 角 的 
添加 按钮 隐藏 掉 ， 而 退出 添加 页 的 方法 正好 相反 。 

在 add.html 中 用 了 Mui 中 的 输入 框 和 按钮 样式 ， 页 面 简洁 大 方 。 在 页 面 中 调用 add.js 进行 初始 化 ， 将 
不 需要 的 按钮 事件 屏蔽 ， 监 听 添 加 按钮 事件 ， 然 后 将 标题 和 内 容 通过 fire 的 方式 传 到 list 页 面 ， 在 list 页 面 
操作 是 为 了 让 添加 页 面 的 效果 更 加 流畅 。 

addjs 文件 : 

/1/ 初始 化 


mui.init({ 
keyEventBind:{ 
backbutton:false, 
menubutton:false 








} 
Ds; 
// 所 有 方法 都 放 到 这 里 


mui .plusReady (function (){ 
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resetPage () 
qiao.on('.addItemBtn', 'tap', addItem); 
Ds; 


// 重 置 页 面 

function resetPage () 1{ 
$('#addContent') .val(''); 
$('#addTitle') .val(''); 


// 添加 待 办 事项 
function addItem(){ 
var title=$.trim($('#addTitle') .val ()); 
var content=$.trim($('#addContent') .val ()) .replace(/\n/g, '<br/>'); 


if(!title){ 
qiao.h.alert (' 请 填写 待 办 事项 标题 ! '); 
}else{ 
qiao.h.getPage('add') .hide(); 
resetPage (); 
qiao.h.fire('list',"'addIitem', {title:title,content:content}); 
} 
} 


20.2.5 ”完成 事项 


在 本 App 中 左 滑 待 办 事项 会 出 现 完成 按钮 ， 单 击 按钮 会 完成 待 办 事项 ， 并 加 入 侧 滑 菜单 ， 此 过 程 中 进 
行 的 处 理 是 将 事项 从 待 办 表 中 删除 ， 同 时 将 事项 加 入 完成 表 中 。 涉 及 两 个 页 面 ， 一 个 是 listhtml， 另 一 个 是 
menu.html。 为 了 让 操作 更 流畅 ， 所 以 在 list 页 面 只 进行 单 击 事件 ， 然 后 将 事件 传递 到 menu 页 面 进行 操作 ， 
添加 完成 事项 ， 移 除 待 办 事项 ， 显 示 完成 事项 操作 。 在 listjs 中 进行 了 如 下 处 理 : 

// 完成 


qiao.on('.doneBtn', 'tap', function(){ 
Var $1i=$ (this) .parent() .parent (); 
Var id=$li.data('id')7 
$1i.remove(); 
showList($('#todolist')); 
qiao.h.fire('menu', 'doneItem', {todoId:id}); 
return false; 


1D; 
第 一 部 分 是 获取 该 待 办 事项 的 id， 然 后 移 除 li， 第 二 部 分 是 将 获取 的 id 通过 fire 的 方式 传 到 menu 





















































20.2.6 右 滑 菜 单 


在 本 App 中 例 滑 菜单 用 来 记录 已 经 完成 的 事项 。 用 HBuilder 实现 类 似 侧 滑 菜单 这 样 原生 App 功能 , 一 
般 有 两 种 实现 方式 : 一 是 webview 实现 ,二 是 div 模拟 实现 ， 两 者 的 区 别 是 div 实现 简单 ， 但 是 效果 有 时 不 
是 很 好 ， 而 webview 实现 稍微 复杂 ， 页 面 传 值 也 复杂 ， 但 是 效果 好 ， 一 般 推荐 使 用 webview 实现 方式 。 
通过 listjs 可 以 看 到 初始 化 方法 时 进行 了 右 滑 时 间 监 听 。 代 码 如 下 : 
window.addEventListener('swiperight', function(){ 


qiao.h.indexPage() .evalJS ("opMenu();"); 
Ds 


这 里 调用 的 是 index 的 菜单 操作 方法 。 当 右 滑 操 作 时 将 会 进入 到 menu.html 页 面 ， 页 面 通过 menu.js 进 
行 处 理 。 代 码 如 下 : 
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// 初始 化 
mui.init({ 
keyEventBind:{ 
backbutton:false 
} 
Ds 
// 所 有 的 方法 都 放 到 这 里 
mui.plusReady (function(){ 
initDoneList (); 
// 添加 已 完成 事项 
window.addEventListener ('"doneItem' ,doneItemHandler) 7 
// 初始 化 待 办 事项 
function initDoneList()1{ 
var S$ul=$('#donelist') .empty() 
qiao.h.query(db, 'select * from t plan day done order by id desc', function(res){ 
for (i=0; i < res.rows.length; i++) { 
$ul.append (genLi (res.rows.item(i) .plan title)); 


} 
showList($ul); 
1D) 
} 
function genLi(title){ 
return '<li class="mui-table-view-cell">' + title + '</li>'; 
} 
function showList (ul){ 
if(ul.find('l1i').size()>0 && ul.is(':hidden')) ul.show(); 
1 
// 添加 已 完成 事项 
function doneItemHandler (event){ 
Var todoId=event .detail.todoId; 
qiao.h.query(db, 'select * from t plan day todo where id=' + todoId, function(res){ 
if(res.rows.length > 0){ 
Var data=res.rows.item(0); 
qiao.h.query (db, 'select max(id) mid from t plan day done', function(res1){ 
$('#donelist') .prepend('<]li 
class="mui-table-view-cell>test</1i>') .prepend (genLi (data.plan title)).show(); 
var id=(resl.rows.item(0) .mid) ? resl.rows.item(0) .mid:0; 
qiao.h.update (db, 'insert into t plan day done (id, plan title, plan content) 
values (' + (id+1) + ', "' + data.plan title + '", "' + data.plan Content + '")'); 
qiao.h.update (db, 'delete from t plan day todo where id=' + todoId); 





通过 JavaScript 可 以 看 到 ， 页 面 自动 加 载 window. 人 
= App 云 庙 打 人 
addEventListener('doneItem', doneItemHandler); 进行 已 完成 二 和 下 有 0 闪 ,全 本 rR 大 者、 
事件 的 webSQL 查询 和 展示 。 El ssa 
is ren sped 


A 名 合用 于 时 下 书 


20.2.7 App 打包 Ne ee 


TCR 








HBuilder 默认 是 在 云端 打包 的 ， 也 就 是 将 代码 提交 ， 


Andrcid@ 名 indceudH51DC4DDE 


再 进行 打包 ， 然 后 下 载 打 包 好 的 包 ， 优 点 : 不 管 机 器 配置 as 
高 低 ， 只 要 网 速 快 都 可 以 很 快 打 好 包 ， 当 然 你 也 可 以 进行 Be 
本 地 打包 ， 那 样 就 需要 Android 和 iOS 环境 ， 不 做 推荐 。 En 至 


在 编辑 器 中 选择 “发 行 一 发 行为 原生 态 包 ” 选 项 ， 进 入 到 
云端 打包 页 面 ， 如 图 20-5 所 示 。 












































图 20-5 云端 打包 页 面 
383 


FN 
HTML 5 从 入 门 到 项 目 实践 ( 超 信 版 ) 
B= 





20.3 ”运行 效果 


通过 HBuilder 打包 之 后 ， 生 成 APK 安装 包 ， 在 手机 上 安装 并 运行 ， 效 果 如 下 : 








首页 页 面 效果 如 图 20-6 所 示 ; 新 增 页 面 如 图 20-7 所 示 ; 详情 页 









































面 如 




















20-8 所 示 ; 左 滑 完成 页 面 如 

















20-9 所 示 ; 长 按 删 除 页 面 如 图 20-10 所 示 ; 右 滑 进 入 完成 页 面 如 图 20-11 所 示 。 

















三 记事 本 由 
今天 学 习 移 动 App 开 发 
明天 出 差 


功能 介绍 


图 20-6 首页 效果 
三 记事 本 ® 
ai 六 柚 | = | 
21 细 


20-9 左 滑 进 入 完成 页 面 
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记事 本 





20-7 ”新 增 页 面 


二 记事 本 外 


了 明天 提交 设计 文档 
上 三 光 咸 这 外文 5 短 瑟 ， 开 要 交 曲 居 ， 


| 记事 本 操作 
删除 


om 


5 左 灿 党 示 克 成事 大 


20-10 ”删除 页 面 





20-8 详情 页 面 


明天 提交 设计 文档 


图 20-11 右 滑 进 入 完成 页 面 


第 21 章 
人 脸 识别 案例 一 一 年 龄 小 侦探 App 


~ 


< 学习 指 引 


移动 App 已 逐渐 成 为 技术 人 员 必 须 掌握 的 一 门 技术 和 本 领 移动 App 的 学 习 已 迫不及待 。 下面 让 我 们 
通过 一 个 案例 来 一 起 揭 开 移动 App 神秘 的 面纱 。 该 案例 介绍 的 是 一 个 人 脸 识别 的 “年 龄 小 侦探 App” ， 是 
一 个 基于 HTML 5+CSS 3+jQuery 实现 的 移动 端 App， 支 持 Android 和 iOS 系统 。 下 面 将 从 基础 和 实用 的 角 
度 通 过 基本 功能 梳理 、 开 发 环境 准备 、 项目 实战 的 三 步 走 方针 展开 论述 , 力求 每 一 位 学 习 者 对 一 个 简单 App 
的 实现 可 以 柳暗花明 ， 积 累 一 定 的 经 验 ， 掌 握 必 要 的 实战 能 力 ! 


二 重点 导读 


。 掌 握 使 用 HTML 5+JavaScript+CSS 设计 。 
“掌握 HBuilder 的 安装 与 环境 配置 。 

。 熟 悉 Native.js。 

。 掌 握 App 打包 的 方法 。 

。 了 解 人 脸 识别 的 方法 。 


21.1 项 目 概述 


21.1.1 功能 梳理 


一 位 优秀 的 开发 工程 师 一 定 是 一 名 合格 的 产品 经 理 和 需求 分 析 师 。 一 切 开发 和 设计 均 是 围绕 业务 展开 “ 
和 实现 的 。 面 对 一 个 应 用 系统 首先 要 做 到 的 是 明确 它 的 需求 ， 才 能 让 代码 在 你 的 指 尖 尽 情 跳跃 ， 来 达到 最 
面 就 让 我 们 简要 梳理 分 析 一 下 “年 龄 小 侦探 App” 需 要 实现 哪些 功能 项 才能 呈现 完美 效果 ? 
。 照片 选择 器 : 其 实 就 是 移动 端 文 件 的 查询 ， 调 用 文件 选择 器 。 
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RN 








。 摄像 头 拍照 : 调用 本 地 摄像 头 进行 拍照 。 
。 文件 上 传 : 将 从 照片 文件 夹 中 选择 的 照片 或 者 拍摄 确定 的 照片 








上 传 。 





VE Nin 








。 人 脸 识别 : 调 月 
结果 。 











开发 环境 和 第 20 章 一 样 ， 
站 21.1.3 ”代码 结构 





face++ 接 口 实现 人 脸 识别 ， 给 出 年 龄 判断 

















可 参考 “记事 本 App” 案 例 开 发 环境 。 

















使 用 HBuilder 打开 项 目 之 后 ， 整 个 项 目的 代码 结构 如 图 21-1 所 示 。 图 21-1 让 结构 











该 项 目 中 只 有 一 个 主要 的 





的 简单 CSS 3 展示 ， 所 有 的 功能 实现 都 是 通过 调用 原生 的 Mui 和 JavaScript 控制 实现 的 (主要 的 调用 为 


index.js Fl qiao.js )。 


21.2 ”项目 解析 


展示 和 操作 页 面 ， 即 index.html， 所 有 效果 都 是 通过 原生 自 带 和 自己 手动 编写 























此 项 目 所 有 的 常用 方法 都 是 在 index.js 中 进行 调用 的 。 看 一 下 index.js 和 qiaojs 文件 的 代码 , 就 会 让 你 


一 目 了 然 。 





21.2.1 index.html 文件 


该 代码 文件 直接 是 应 用 程序 的 主 入 口 ,定义 了 程序 的 结构 和 所 需 的 JavaScript、image 等 资源 ， 具 体 代码 如 下 ; 


<!DOCTYPE html> 
<html> 
<head> 





<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width,initial-scale=]1,minimum-scale=1, 
maximum-scale=]1,user-scalable=no" /> 


<title>face</title> 


<link rel="stylesheet" type="text/css" href="css/mui.min.css"/> 
<link rel="stylesheet" type="text/css" href="css/app/index.css"/> 


</head> 
<body> 


<div class="mui-content-padded"> 


<img class="face-— 


img" id="faceImg"/> 


<button class="mui-btn mui-btn-primary face-btn” id="faceBtn"> 开 始 识别 </button> 


<p id="res"></p> 
</div> 


<form method="post" action="http://upload.qiniu.com/" enctype="multipart/form-data" 


id="faceForm"> 


<input name="file" type="file™" /> 


<input name="key" 


type="hidden" /> 


<input name="token” type="hidden" /> 


</form> 
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<script type="text/javascript" 
<script type="text/javascript" 
<script type="text/javascript" 


js/mui.min.js"></script> 
js/lib/jquery/jquery-1.11.2.min.js"></script> 
js/lib/jquery/jquery. form.js"></script> 





<script type="text/javascript" js/lib/encode/core-min.js"></script> 
<script type="text/javascript" js/lib/encode/cipher-core-min.js"></script> 
<script type="text/javascript" js/lib/encode/enc-base64-min.js"></script> 
<script text/javascript" js/lib/encode/hmac-min.js"></script> 
<script text/javascript™ js/lib/encode/shal-min.js"></script> 
<script text/javascript" js/lib/facepp/facepp-sdk.min.js"></script> 


<script type="text/javascript" src="js/lib/qiao.js"></script> 
<script type="text/javascript" src="js/app/index.js"></script> 
</body> 
</html> 


.2.2 ”index.js 文件 


具体 代码 如 下 : 
// 初始 化 


mui.init({}); 





// 所 有 方法 都 放 到 这 里 

mui.plusReady (function(){ 
if(mui.os.ios) plus.navigator.setStatusBarBackground ('#EFEFF4°'); 
qiao.on('#faceImg', 'tap', choiceImg);// 选 择 照 片 
qiao.on('#faceBtn', 'tap',uploadImg);// 上 传 照 片 
// 退出 
mui .back=function()1{ 

qiao.h.exit() 7 

}; 

Ds 

// 选择 图 片 

function choiceImg(){ 


qiao.h.sheet (' 选 择 有 照片 '，[' 拍 照 ',' 相 册 ']，function (e){ 





Var index=e.index; 
if (index: ) choiceCamera(); 
if (index: ) choicePic(); 
Ps 
} 
// 调用 相机 


function choiceCamera()1{ 
Var cmr=plus.camera.getCamera(); 
cmr.captureImage (function (p){ 
plus.io.resolveLocalFileSystemURL(p, function(entry){ 
setImg (entry.toLocalURL()); 
}, function(e){}); 
}, function(e){},{index:1,filename:" doc/camera/"}); 


于 
// 选择 相册 照片 
function choicePic(){ 
plus.gallery.pick(function (path) {setImg (path);},function(e){}, {filter:'image'}); 
3 
function setImg(src){ 
$('#faceImg') .attr('src', src); 
: 


// 上 传 图 片 


var url,tsrc; 
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21.2.3 qiao.js 文件 
具体 代码 如 下 : 
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第 国 章 人 脸 识 别 案例 一 -年 龄 小 侦探 App 





HTML 5 从 入 门 到 项 目 实践 ( 超 值 版 ) 


var success=options.successy 
Var fail=options.fail; 
new FacePP (qiao.facepp.ak, qiao.facepp.sk) .request (method, { 
url:url, 
attribute:attr 
}, functionl(err, result) { 
ifl(err){ 
fail() 7 
jelsef 
success (result); 


nD); 
}; 


器 % 洲 21.2.4 项 目 功能 知识 点 详解 
Ss 


1. ActionSheet 选择 


在 上 面 的 方法 中 可 以 看 到 页 面 中 使 用 的 操作 方法 为 选择 照片 和 上 传 照片 。 这 里 先 来 看 一 下 选择 照片 的 
方法 。 此 处 调用 的 是 ActionSheet 的 方法 ， 它 在 iPhone 上 很 常见 ，Mui 的 ActionSheet 有 两 种 实现 方式 ， 一 
种 是 HTML 5 模仿 ， 一 种 是 调用 封装 好 的 nativeUI 进行 实现 ， 这 里 推荐 原生 的 实现 ， 一 是 效果 逼真 ， 二 是 
缺点 比较 少 。 下 面 是 调用 nativeui 组 件 的 ActionSheet 方法 ， 这 里 稍 作 封装 予以 列 示 : 


// actionsheet 
qiao.h.sheet=function (title, btns,func){ 
if(title && btns && btns.length>0){ 
var btnArray=[]; 
for (var i=0; i<btns.length;i++){ 
btnArray.push({title:btns [i]}); 
} 
//nativeui 组 件 的 actionsheet 方法 
plus.nativeUI .actionSheet ({ 
title:title, 
cancel:' 取 消 '， 
buttons:btnArray 
}, function(e){ 
if(func) funcl(e); 


nD); 












































} 
La 


从 上 面 的 代码 可 以 看 到 ， 其 实 只 需要 传 入 一 个 标题 、 固 定 的 取消 按钮 、 需 要 传 入 的 按钮 数组 以 及 一 个 
可 调 函数 , 即 可 通过 判断 e.index 确定 单 击 了 哪个 按钮 。 本 例 中 , 标题 设置 为 “选择 照片 ”， 需 要 两 个 按钮 ， 
一 个 是 “拍照 ”， 一 个 是 “相册 ”。 操 作 说 明 如 下 : 

(1) 当 e.index=1 时 ， 是 单 击 了 “拍照 ”按钮 。 

(2) 当 eindex=2 时 ， 是 单 击 了 “相册 ”按钮 。 

(3) 当 eindex=0 时 ， 是 单 击 了 “取消 ”按钮 ， 不 做 处 理 。 

(4) 当 单 击 其 他 地 方 时 ，e.index=-1， 同 样 不 做 处 理 。 

代码 如 下 : 

// 选择 图 片 


function choiceImg(){ 
qiao.h.sheet (' 选 择 照 片 '，[' 拍 照 ',' 相 册 ']，function(e){ 
Var index=e.index; 
if(index==1) choiceCamera(); 
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if(index==2) choicePic(); 


Ds 
} 


2. 拍照 与 选择 照片 
拍照 和 选择 照片 是 App 中 比较 常用 的 功能 。 上 面 我 们 讲解 了 调用 ActionSheet 之 后 ， 通 过 e.index 来 让 




















// 选择 图 片 


户 选择 是 拍照 还 是 选择 照片 ， 下 面 一 起 学 习 一 下 具体 实现 。 代 码 如 


function choiceImg (){ 
qiao.h.sheet (' 选 择 照 片 '， 
Var index=e.index; 
if(index==1) choiceCamera(); 
if(index==2) choicePic(); 


nD); 
} 
// 调用 相机 


function choiceCamera(){ 
Var cmr=plus.camera.getCamera(); 
cmr.captureImage (function (p){ 
plus.io.resolveLocalFileSystemURL(p, function(entry){ 
setImg (entry.toLocalURL ()); 
}, function(e){}); 
}, function(e){}, {index:1,filename:" doc/camera/"}); 


} 
// 选择 相册 照片 


function choicePic(){ 
plus.gallery.pick(function (path) {setImg (path);},function(e){}, {filter:'image’'}); 


} 


function setImg(src){ 
$('#faceImg') .attr('src', src); 


} 
。 拍照 









































[" 拍 照 "，" 相 册 "] ，function(e){ 


拍照 使 用 到 了 nativejs 封装 好 的 Camera 对 象 ， 详 见 : http://www.dcloud.io/docs/api/zh_cn/camera.html。 
首先 通过 var cmr = plus.camera.getCamera(); 获 取 Camera 对 象 ， 然 后 调用 captureImage 进行 拍照 ， 这 个 方法 
有 三 个 参数 cmr.captureImage(successCB, errorCB, option):， 第 一 个 是 拍照 成 功 的 回调 , 第 二 个 是 拍照 失败 的 




















拍照 成 功 后 会 返 











可 调 ， 第 三 个 是 拍照 的 设置 ， 其 中 第 一 个 、 第 三 个 是 必 选 的 。 
可 文件 的 url 地 址 , 然后 通过 IO 组 件 , 获取 文件 对 象 , IO 组 件 详 见 : http://www.dcloud. 


io/docs/api/zh_cn/io.html。 这 里 我 们 调用 resolveLocalFileSystemURL 方法 获取 文件 ， 该 方法 有 三 个 参数 void 
plus.io.resolveLocalFileSystemURL(url, succesCB, errorCB);， 第 一 个 是 要 操作 文件 或 目录 的 URL 地 址 ， 第 二 


个 是 获取 操作 文件 或 
通过 拍照 获取 了 文件 
。 选择 相册 




















选取 相片 用 到 的 是 gallery 组 
理 系统 相册 ， 支 持 从 相册 中 选择 图 





地 址 。 














目录 对 象 成 功 的 回调 函数 ， 第 三 个 是 获取 操作 文件 或 目录 对 象 失败 的 回调 函数 。 至 此 ， 


件 ， 详 见 : http://www.dcloud.io/docs/api/zh_cn/gallery.html。Gallery 模块 管 








片 或 视频 文件 、 保 存 图 片 或 视频 文件 到 相册 等 功能 。 通 过 plus.gallery 获 





























取 相 册 管 理 对 象 。 从 系统 相册 获取 相片 使 用 了 以 下 方法 : void plus.gallery.pick(successCB, errorCB, option); 
人 参数 和 上 面 的 类 似 ， 至 此 ， 选 取 相片 也 获取 了 文件 地 址 。 


3. 文件 上 传 


做 App 不 得 不 谈 的 问题 就 是 文件 上 传 ， 用 HBuilder 开发 App 让 上 传 变 得 很 简单 。Uploader 模块 管理 网 络 
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上 传 任务 ， 用 于 从 本 地 上 传 各 种 文件 到 服务 器 ， 并 支持 跨 域 访问 操作 。 通 过 plus.uploader 可 获取 上 传 管理 对 象 。 
Uploader 上 传 使 用 HTTP 的 POST 方式 提交 数据 ， 数 据 格式 符合 Multipart/form-data 规范 ， 即 rfc1867 
(Form-based File Upload in HTML) 协议 。Uploader 的 上 传 封装 代码 如 下 : 


可 以 看 到 其 核心 是 一 个 createUpload0 方 法 ， 创 建 一 个 Upload 对 象 之 前 会 先 写 好 成 功 和 失败 的 回调 函 
数 。 创 建成 功 后 为 Upload 对 象 添加 数据 ， 包 括 要 上 传 的 文件 和 其 他 数据 ， 最 后 执行 Start 方法 开始 上 传 。 

在 项 目 中 ， 当 用 户 选择 相片 或 者 拍照 生成 相片 后 ， 只 要 单 击 “ 开 始 识别 ”按钮 ， 就 会 执行 上 传 操作 。 
代码 如 下 : 





第 鸭 章 ”人 脸 识别 案例 一 一 年 龄 小 侦探 App 





为 了 防止 每 次 单 击 都 上 传 照片 ， 需 要 做 一 个 判断 ， 如 果 App 中 的 照片 ste 没有 变化 就 不 上 传 ， 否 则 用 
封装 好 的 qiao hupload 进行 上 传 。 如 果 上 传 失败 给 予 提示 ， 上 传 成 功 则 进行 图 片 识 别 。 


4. “七 牛 云 ”上 传 

不 得 不 说 自从 所 谓 的 “ 云 ” 概 念 开始 ， 多 多 少 少 还 是 给 生活 带 来 了 一 些 改变 ， 其 中 对 开发 者 影响 比较 
大 的 就 是 各 种 云 平台 和 云 存储 ， 云 存储 中 “七 牛 云 ” 较 好 。 

“七 牛 云 ”的 上 传 支持 很 多 种 语言 ， 由 于 是 App 中 要 上 传 到 “七 牛 云 ” 所 以 不 可 能 使 用 Java， 而 用 
JavaScript 上 传 ， 其 过 程 详 见 https://developer.qiniu.com/kodo。 简 单 来 说 就 是 给 普通 的 上 传 表单 添加 一 些 字 
段 ， 其 中 包括 自己 生成 的 uptoken。 

上 传 赁 证 : 上 传 表单 中 最 重要 的 就 是 上 传 凭证 uptoken 的 生成 , 过程 为 : 构建 JavaScript 对 象 , 转 JSON 
等 一 系列 编码 。 
整体 封装 代码 如 下 : 
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var encoded=qiao.encode.base64encode (qiao.encode.utf16to8 (putPolicy)); 
//SETP 3 
var hash=CryptoJs.HmacSsHAl (encoded, qiao.qiniu.sk); 
var encoded signed=hash.toString (CryptoJSs.enc.Base64); 
//SETP 5 
var upload token-qiao.qiniu.ak + ":" + qiao.encode.safe64(encoded signed) + ":" + encoded; 
return upload token; 
Fn 
qiao.qiniu.url=function (key) { 
return qiao.qiniu.pr + qiao.qiniu.file; 
Fn 


。 qiao.qiniu: 是 初始 化 信息 ， 包 括 七 牛 云 的 ak、sk、 地 址 、bucket 名 称 。 

。 qiao.qiniu.deadline: 就 是 之 前 说 的 截止 时 间 。 

。 qiao.qiniu.uid: 是 获取 一 个 UUID 〈 通 用 唯一 识别 码 )， 这 样 是 为 了 避免 两 个 用 户 有 可 能 同时 使 用 同 
一 个 用 户 名 上 传 文件 名 的 情况 出 现 。 

。 qiao.qiniu.genScope: 是 生成 JavaScript 对 象 中 的 scope 属性 ， 原 因 之 前 已 经 说 过 了 ， 由 于 文件 名 
后 还 要 用 ， 所 以 保存 到 了 qiao.qiniu.file 中 。 

。 qiao.qiniu.uptoken: 是 官网 告诉 你 的 几 个 步 又， 包括 转 Json、base 64 和 shal 加 密 。 

这 样 就 得 到 了 一 个 正确 的 uptoken。 

学 习 了 cryptojs 之 后 ， 就 可 以 实现 各 种 JavaScript 前 端 加 密 。 此 处 需要 生成 uptoken 做 加 密 。 

通过 cryptojs 实现 JavaScript 库 加 密 算法 的 官网 相关 链接 为 https://code.google.comyp/crypto-js/。 

此 处 使 用 的 比较 简单 ， 需 要 的 只 是 base 64 编码 和 shal 加 密 ， 只 需要 下 面 这 些 JavaScript 即 可 : 


<script type="text/javascript" src="js/lib/encode/core-min.js"></script> 
<script type="text/javascript" src="js/lib/encode/cipher-core-min.js"></script> 
<script type="text/javascript" src="js/lib/encode/enc-base64-min.js"></script> 
<script type="text/javascript" src="js/lib/encode/hmac-min.js"></script> 
<script type="text/javascript" src="js/lib/encode/shal-min.js"></script> 


实现 加 密 算法 的 代码 较 多 都 在 qiaojs 中 ， 此 处 就 不 再 详细 效 述 ， 直 接 使 用 即 可 ， 如 下 代码 所 示 : 


var hash=CryptoyJS.HmacSHAl (encoded, qiao.qiniu.sk); 
var encoded signed=hash.tostring(CryptoJS.enc.Base64); 


5. 人 脸 识 别 
face++ 是 一 个 人 脸 识 别 的 接口 ， 很 多 































































































四 





内 的 App 都 在 使 用 ， 例 如 美 图 秀 秀 等 。 此 案例 最 终 目的 就 是 通 














过 人 脸 识别 给 出 分 析 结 果 。 





接 
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首先 来 到 开发 者 中 心 ， 可 以 看 到 ， 需 要 进行 一 些 注册 ， 比 较 简单 ， 略 过 。 然 后 找到 API， 发 现 一 个 需要 的 
， 识 别人 脸 ， 这 个 接口 的 参数 必须 是 ak、sk、url。 

// face pp (人 脸 识 别 ) 

diao.facepp={ 


ak: "3bbeeac39cd5e8600d2cb05ac97fl5fd'， 
Sk: "41f9qM6e7GVLVRfKYITYX9R7GX6_5Taa'" 














} 7 
diao.facepp.do=function (options){ 
var url=options.url; 
Var attr=options.attr || 'gender,age'; 
Var method=options.method || "detection/detect'7 
Var success=options.success; 
var fail=options.fail; 
new FacePP (qiao.facepp.ak, diao.facepp.sk) .request (method, { 
Mr 
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代码 比较 简单 ， 其 中 : 

qiao.facepp: 表示 初始 化 信息 ， 也 就 是 ak、sk。 

qiao.facepp.do: 表示 开始 访问 接口 ， 这 里 只 需要 传 入 图 片 的 URL 地 址 即 可 。 
此 App 的 调用 使 用 代码 如 下 : 


21.3 ”运行 效果 


项 目 编译 打包 后 ， 生 成 APK 安装 包 ， 在 手机 上 安装 并 运行 ， 得 到 的 效果 分 别 为 :首页 页 面 效 果 如 图 


401 





HA Smamaam ( 超 值 版 ) 
NA 





21-2 所 示 ; 选择 功能 页 面 效果 如 图 21-3 所 示 ; 识别 效果 页 面 如 图 22-4 所 示 。 




















图 21-2 首页 页 面 效果 图 21-3 选择 功能 页 面 效 果 图 21-4 识别 效果 页 面 
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